/* =====================================================================
   CRESTA HOME HERO — full replacement for the old hero.css
   (intro, UI overlays + progress ring match the client prototype)
   ===================================================================== */

/* ---------- page / slider ---------- */
html, body { overflow-x: clip; }
/* desktop: no elastic bounce past the top / bottom of the page. The slider is pinned (fixed)
   from scroll 0, so a bounce dragged the headline down over it. Phones keep pull-to-refresh. */
@media (min-width: 992px) {
  html, body { overscroll-behavior-y: none; }
}
.home-hero_slider, .home-hero_track, .home-hero_slide { will-change: transform; }

/* ---------- intro ---------- */
/* until the script has decided whether the intro plays, the hero stays dark so the
   finished state never flashes first (failsafe: it shows anyway after 3.5s) */
html:not(.is-hero-ready):not(.wf-design-mode) .home-hero_content,
html:not(.is-hero-ready):not(.wf-design-mode) .home-hero_slider { opacity: 0; animation: hero-failsafe 0s linear 3.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-hero-ready) .home-hero_content, html:not(.is-hero-ready) .home-hero_slider { opacity: 1; animation: none; }
}

/* desktop: the slider only gets its full height once the script has measured the page,
   so until then the hero holds a full screen — the next section never peeks in on load */
@media (min-width: 992px) {
  html:not(.is-hero-sized):not(.wf-design-mode) .section_default.is-home-hero { min-height: 100vh; min-height: 100svh; }
}

/* the intro sentence: only on screen while the intro runs (the script sets top/height
   to the space under the nav) */
.home-hero_intro { display: none; }
html.is-hero-intro .home-hero_intro {
  display: flex; align-items: center; justify-content: center;
  position: fixed; left: 0; right: 0; top: 72px; bottom: auto; height: calc(100vh - 72px);
  padding: 0 16px; overflow: hidden; pointer-events: none; z-index: 20;
}
.home-hero_intro .home-hero_intro-heading {
  position: relative; top: auto; left: auto; transform: none;
  display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; white-space: nowrap;
  font-size: clamp(14px, 3.1vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em;
  color: var(--_design-tokens---colors--text--text-primary, #24242A);
  will-change: transform, opacity;
}
.home-hero_intro .home-hero_intro-text {
  font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; color: inherit;
  flex: none; will-change: transform;
}
.home-hero_intro-gap { display: block; flex: 0 0 auto; width: .32em; height: 1px; }
/* phones: the two halves stack and the video opens between the lines */
@media (max-width: 767px) {
  .home-hero_intro .home-hero_intro-heading { flex-flow: column nowrap; font-size: clamp(22px, 7.4vw, 34px); line-height: 1.1; }
  .home-hero_intro-gap { width: 1px; height: .32em; }
}
/* the riffling deck is one undimmed frame; names + rings arrive once the row has spread
   (classes sit on the slider: the desktop pin moves it out of the component) */
.home-hero_slider.is-hero-deck .home-hero_slide { filter: none !important; }
.home-hero_slider.is-hero-labels-off .home-hero_slide-title,
.home-hero_slider.is-hero-labels-off .home-hero_progress { opacity: 0 !important; }

/* Designer: the sentence stays visible and editable above the hero */
html.wf-design-mode .home-hero_intro {
  display: flex; justify-content: center; position: relative; inset: auto; z-index: auto;
  padding: 1.25rem 0; outline: 1px dashed rgba(37, 99, 235, .5); pointer-events: auto;
}

/* card size (from the prototype): the active card gives up width so the neighbouring
   stages read as tappable, not slivers — 70% of the screen, 66% on phones */
.home-hero_slide { flex: 0 0 70vw; width: 70vw; }
@media (max-width: 720px) {
  .home-hero_slide { flex: 0 0 66vw; width: 66vw; }
}

/* phones: the email field is dropped (hero-hubspot-form-embed), so "Book a demo" and
   Beast Mode sit side by side as two compact buttons */
@media (max-width: 720px) {
  .home-hero_cta { flex-direction: row; align-items: center; justify-content: center; align-self: center; gap: .5rem; }
  .home-hero_cta > * { flex: 0 0 auto; width: auto; }
  .home-hero_beast { display: inline-flex; align-items: center; height: 40px; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; border-radius: 8px; }
}

/* side cards are dimmed, the active one is clear */
.home-hero_slide { transition: filter .88s cubic-bezier(.22,.72,.16,1); }
.home-hero_slide:not(.is-active) { filter: brightness(.66) saturate(.94); }
.home-hero_slide.is-active { filter: none; }

/* video framing is set by the script (focal point per clip) */
.home-hero_video { object-fit: cover; }

/* the UI layer fills the slide */
.hero-ui { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

/* ---------- progress ring = play / pause ---------- */
.home-hero_progress {
  width: 34px !important; height: 34px !important;
  border: 0 !important; border-radius: 50%;
  background: none !important;
  z-index: 5; cursor: pointer; pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
.home-hero_slide .home-hero_progress { left: clamp(18px, 2vw, 34px); bottom: clamp(18px, 2vw, 32px); }
.home-hero_progress::before, .home-hero_progress::after { content: none !important; }
.home-hero_progress:focus { outline: none; }
.home-hero_progress:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hui-ring_hit { position: absolute; inset: -9px; }
.hui-ring_svg { position: absolute; inset: 0; display: block; width: 34px; height: 34px; transform: rotate(-90deg); opacity: .55; transition: opacity 240ms ease; }
.home-hero_slide.is-active .hui-ring_svg { opacity: 1; }
.hui-ring_track { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 2; }
.hui-ring_arc { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; }
.hui-ring_glyphs { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.home-hero_progress:hover .hui-ring_glyphs,
.home-hero_progress:focus-visible .hui-ring_glyphs,
.is-hero-paused .hui-ring_glyphs { opacity: 1; }
.hui-ring_glyphs svg { grid-area: 1 / 1; width: 13px; height: 13px; fill: #fff; transition: opacity 160ms ease; }
.hui-ring_play { margin-left: 2px; opacity: 0; }
.is-hero-paused .hui-ring_pause { opacity: 0; }
.is-hero-paused .hui-ring_play { opacity: 1; }
@media (hover: none) { .home-hero_progress:hover .hui-ring_glyphs { opacity: 0; } .is-hero-paused .home-hero_progress .hui-ring_glyphs { opacity: 1; } }

/* ---------- overlay root ---------- */
.hui {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  font-family: "DM Sans Variable", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; color: #25252A; text-align: left;
}
.hui *, .hui *::before, .hui *::after { box-sizing: border-box; }
.hui p { margin: 0; }
.hui img { max-width: none; }

/* columns */
.hui_col { position: absolute; top: 0; height: 100%; }
.hui_col.is-automate  { right: 3.5%; width: 31%; min-width: 210px; max-width: 380px; }
.hui_col.is-aug-left  { left: 3.5%;  width: 31%; min-width: 210px; max-width: 380px; height: calc(100% - clamp(18px, 2vw, 32px) - 44px); }
.hui_col.is-aug-right { right: 3.5%; width: 36%; min-width: 272px; max-width: 420px; height: calc(100% - clamp(18px, 2vw, 32px) - 44px); }
.hui_col.is-analyze   { left: 3.5%;  width: 25%; min-width: 186px; max-width: 306px; height: calc(100% - 30px); }
@media (max-width: 720px) {
  .hui_col { width: 80% !important; min-width: 0 !important; max-width: none !important; }
  .hui_col.is-automate { right: 10%; }
  .hui_col.is-analyze, .hui_col.is-aug-left { left: 10%; right: auto; }
  /* clear the slide title above and the play ring below */
  .hui_col.is-automate, .hui_col.is-analyze, .hui_col.is-aug-left { top: 46px; height: calc(100% - 104px); }
}

/* message rows (positioned by the script) */
.hui_row { position: absolute; left: 0; top: 0; width: 100%; display: flex; justify-content: flex-start; visibility: hidden; will-change: transform; }
.hui_row[data-side="r"] { justify-content: flex-end; }

/* ---------- chat bubbles ---------- */
.hui_bubble { width: 87%; padding: 9px 13px 11px; border-radius: 14px; pointer-events: auto; cursor: text; user-select: text; -webkit-user-select: text; }
.hui_bubble.is-fit { width: max-content; max-width: 87%; }
.hui_bubble.is-ai {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 20px rgba(3,8,26,.14);
}
.hui_bubble.is-user {
  padding: 10px 13px 11px;
  background: linear-gradient(160deg, rgba(93,102,111,.62) 0%, rgba(93,102,111,.44) 52%, rgba(93,102,111,.56) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.15), inset 0 -8px 18px rgba(255,255,255,.06), 0 8px 22px rgba(3,8,26,.2);
}
.hui_text { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; color: #1D1D22; }
.hui_bubble.is-user .hui_text { color: #FFFFFF; }
.hui_who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.hui_who.is-loose { margin-bottom: 7px; }
.hui_orb { position: relative; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 999px; overflow: hidden; background: radial-gradient(120% 120% at 30% 25%, #7FD8E8 0%, #A8E85C 46%, #12A594 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.07); }
.hui_avatar { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 999px; overflow: hidden; background: #205AE3; box-shadow: 0 0 0 1px rgba(0,0,0,.07); }
.hui_avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hui_name { font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: #8A8F98; line-height: normal; }
.hui_highlight { background-image: linear-gradient(90deg, rgba(110,155,242,.9), rgba(32,89,227,.95)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; }

/* ---------- searching → answer morph ---------- */
.hui_morph { position: relative; overflow: hidden; width: 100%; }
.hui_morph-a, .hui_morph-b { position: absolute; left: 0; top: 0; width: max-content; will-change: opacity, transform; }
.hui_morph-b { opacity: 0; }
.hui_loading { display: flex; align-items: center; gap: 7px; }
.hui_loading.is-wide { gap: 10px; }
.hui_loading.is-report { gap: 8px; }
.hui_loader { flex: 0 0 auto; display: block; width: 15px; height: 15px; }
.hui_loader.is-16 { width: 16px; height: 16px; }
.hui_loader.is-18 { width: 18px; height: 18px; }
.hui_loader.is-dark { filter: brightness(0); opacity: .78; }
.hui_loader.is-dark.is-16 { opacity: .8; }
.hui_loader.is-light { filter: brightness(1.5); }
.hui_loading-text { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #D9DCE4; white-space: nowrap; }
.hui_loading-text.is-small { font-size: 12.5px; }

.hui_gradient-pill { display: inline-flex; max-width: 100%; padding: 1px; border-radius: 11px; background: linear-gradient(103deg, #9B8AF0 0%, #7FA8EC 30%, #E4CBA8 66%, #F2A472 100%); }
.hui_gradient-pill-inner { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px 6px 8px; border-radius: 10px; background: #FFFFFF; }
.hui_gradient-pill-inner.is-done { padding: 6px 11px 6px 8px; }
.hui_pill-text { font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: #1D1D22; text-wrap: pretty; }
.hui_pill-text.is-success { font-weight: 600; color: #0B7F52; }
.hui_check-ring { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #0EA963; }

/* ---------- dark glass panels ---------- */
.hui_panel {
  width: 100%; border-radius: 14px;
  background: rgba(20,22,32,.46); border: 1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter: blur(30px) saturate(165%); backdrop-filter: blur(30px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 22px 48px rgba(6,6,12,.26);
  pointer-events: auto; cursor: text; user-select: text; -webkit-user-select: text;
}
.hui_panel.is-assist { display: flex; flex-direction: column; gap: 11px; padding: 14px 15px 13px; border-radius: 13px; }
.hui_panel.is-spike { padding: 12px 14px; }
.hui_panel.is-analyst { border-radius: 15px; }
.hui_panel.is-share { padding: 11px 14px 12px; }

.hui_panel-title { display: flex; align-items: center; gap: 9px; color: #F2F3F6; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; line-height: normal; }
.hui_panel-title svg { flex: 0 0 auto; }
.hui_panel-title.is-inline { flex: 0 0 auto; white-space: nowrap; }
.hui_panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 26px; }
.hui_query { margin: 0; font-size: 12.5px; line-height: 1.45; letter-spacing: -0.005em; color: #D5D9E2; text-wrap: pretty; }

/* gradient hairline boxes */
.hui_glow { position: relative; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.10); }
.hui_glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #93DEFD, #AE95DD 45%, #FCB56C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.hui_glow.is-report { padding: 11px 12px 12px; }
.hui_glow.is-chip { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.14); }
.hui_glow.is-chip svg { flex: 0 0 auto; }

.hui_stack { display: flex; flex-direction: column; }
.hui_stack.is-9 { gap: 9px; }
.hui_stack.is-10 { gap: 10px; }
.hui_answer { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; color: #EDEFF4; text-wrap: pretty; }
.hui [data-tk] { opacity: 0; }
.hui_caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.12em; opacity: 0; font-style: normal; }
.hui_caret b { position: absolute; left: 1px; bottom: 0; display: block; width: 1.5px; height: 1.02em; border-radius: 1px; background: #EDEFF4; }
.hui_divider { height: 1px; background: rgba(255,255,255,.14); }
.hui_divider.is-report { margin-bottom: 11px; }
.hui_divider.is-share { margin: 10px 0 11px; }
.hui_sources { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; min-width: 0; }
.hui_meta { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; color: #B1BAC4; line-height: normal; }
.hui_source { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.13); color: #E9ECF2; font-size: 11px; font-weight: 500; line-height: normal; }
.hui_source.is-shrink { flex: 0 1 auto; min-width: 0; }
.hui_source svg { flex: 0 0 auto; }
.hui_ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hui_nowrap { white-space: nowrap; }
.hui_context { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hui_context-chip { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 4px 9px; border-radius: 999px; background: rgba(252,181,108,.15); border: 1px solid rgba(252,181,108,.30); color: #E9ECF2; font-size: 11px; font-weight: 500; line-height: normal; }
.hui_context-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 999px; background: #FCB56C; }
.hui_field { display: flex; flex-direction: column; gap: 2px; }
.hui_label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(213,217,226,.62); line-height: normal; }
.hui_value { font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; color: #EDEFF4; }

/* claim pill */
.hui_claim { flex: 0 0 auto; margin-left: auto; display: grid; justify-items: end; opacity: 0; transform: scale(.32); transform-origin: 100% 50%; }
.hui_claim-state { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hui_claim-state.is-done { opacity: 0; }
.hui_claim-text { font-size: 11px; font-weight: 600; letter-spacing: -0.005em; color: #E7E9F0; white-space: nowrap; line-height: normal; }
.hui_claim-text.is-done { color: #FFFFFF; }
.hui_claim-check { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #22C55E; }

/* ---------- analyze ---------- */
.hui_spike-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(239,68,68,.20); margin-bottom: 10px; }
.hui_spike-dot { width: 6px; height: 6px; border-radius: 999px; background: #EF4444; }
.hui_spike-text { font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em; color: #FCA5A5; line-height: normal; }
.hui_spike-title { font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; color: #F2F3F6; line-height: normal; }
.hui_spike-sub { font-size: 12px; letter-spacing: -0.005em; color: #B1BAC4; margin-top: 3px; line-height: normal; }
.hui_chart { display: block; width: 100%; height: auto; aspect-ratio: 300 / 50; margin-top: 8px; overflow: visible; }
.hui_chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; letter-spacing: -0.005em; color: #9AA3AE; line-height: normal; }

.hui_ask { display: flex; align-items: center; gap: 12px; padding: 10px 11px 10px 14px; }
.hui_ask-text { margin: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; color: #FFFFFF; }
.hui_ask-btn { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #205AE3; }
.hui_grow { height: 0; overflow: hidden; opacity: 0; will-change: height, opacity; }
.hui_grow-in { padding: 0 14px 13px; }
.hui_report-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hui_report-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: #F2F3F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; }
.hui_share-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: #DCE6FB; line-height: normal; }
.hui_report-body { margin-top: 11px; }
.hui_stat { display: flex; align-items: center; gap: 12px; }
.hui_stat-num { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #F5F6F9; }
.hui_stat-bar { flex: 1 1 auto; display: block; height: 20px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; }
.hui_stat-fill { display: block; width: 70%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #6E9BF2, #205AE3); clip-path: inset(0 100% 0 0 round 6px); }
html.wf-design-mode .hui_stat-fill { clip-path: none; }
.hui_stat-text { margin: 10px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; color: #E4E7EE; }

.hui_share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hui_team { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.10); }
.hui_team-dot { width: 17px; height: 17px; border-radius: 999px; background: rgba(255,255,255,.3); }
.hui_team-name { white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #EDEFF4; line-height: normal; }
.hui_note { margin: 0; min-height: 3em; font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; color: #EDEFF4; }
.hui_note.is-second { margin-top: 3px; }
.hui_share-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.hui_chip-text { min-width: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: #F5F6F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; }
.hui_send-wrap { flex: 0 0 auto; display: grid; justify-items: end; }
.hui_send-btn { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #205AE3; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; line-height: normal; }
.hui_sent { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; border-radius: 999px; background: rgba(34,197,94,.18); box-shadow: inset 0 0 0 1px rgba(34,197,94,.34); opacity: 0; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: #86EFAC; white-space: nowrap; line-height: normal; }
.hui_sent-check { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: #22C55E; }
.hui_sent-check svg { display: block; }

.hui_ripple { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 10px rgba(255,255,255,.35); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.hui_cursor { position: absolute; left: 0; top: 0; width: 22px; height: 24px; visibility: hidden; will-change: transform; filter: drop-shadow(0 3px 6px rgba(3,8,26,.4)); }

/* ---------- shared bits for the new widgets ---------- */
.hui_row.is-center { justify-content: center; }
.hui_group { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hui_group.is-start { align-items: flex-start; }
.hui_stamp { align-self: center; padding: 3px 10px; border-radius: 8px; background: rgba(20,22,32,.5); border: 1px solid rgba(255,255,255,.15); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: "DM Mono", ui-monospace, monospace; font-size: 10.5px; line-height: normal; letter-spacing: .08em; text-transform: uppercase; color: #F2F3F6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hui_head { display: flex; align-items: center; gap: 7px; }
.hui_status { margin-left: auto; display: grid; justify-items: end; align-items: center; }
.hui_status-load, .hui_status-done { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; border-radius: 6px; font-size: 10.5px; line-height: normal; white-space: nowrap; }
.hui_status-load { padding: 1px 7px; background: rgba(11,11,11,.06); font-weight: 500; color: #5A606B; }
.hui_status-done { padding: 1px 7px 1px 3px; font-weight: 600; opacity: 0; }
.hui_status-done.is-mail { background: rgba(34,197,94,.14); color: #0B7A3B; }
.hui_status-done.is-sms { background: rgba(14,169,99,.12); color: #0B7F52; }
.hui_status-ring { flex: 0 0 auto; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 999px; background: #22C55E; transform: scale(.32); }
.hui_status-done.is-sms .hui_status-ring { background: #0EA963; }
.hui_skel { grid-area: 1 / 1; display: block; height: 7px; border-radius: 4px; background: rgba(11,11,11,.09); }
.hui_cell { display: grid; align-items: center; }
.hui_cell > * { grid-area: 1 / 1; }
.hui_orb-blue { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; overflow: hidden; background: #5B86FF; box-shadow: 0 0 10px 2px rgba(64,110,240,.55); pointer-events: none; will-change: transform; }
.hui_orb-blue.is-18 { width: 18px; height: 18px; opacity: 0; z-index: 3; }
.hui_orb-spin { position: absolute; inset: -30%; background: conic-gradient(from 0deg, #5B86FF, #34D1BF, #FFB547, #A77BFF, #5B86FF); filter: blur(2px); }
.hui_orb-shine { position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(55% 45% at 32% 24%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 62%); }
.hui_orb-rim { position: absolute; inset: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -4px 7px rgba(4,8,24,.4); }
.hui_orb-trail { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; background: radial-gradient(circle, rgba(110,165,255,.85) 0%, rgba(91,134,255,.35) 55%, rgba(91,134,255,0) 75%); filter: blur(5px); opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* email card (Automate) */
.hui_mail { position: relative; width: 87%; min-width: 210px; display: flex; flex-direction: column; gap: 8px; padding: 10px 11px 11px; }
.hui_env { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 9px; border-radius: 10px; background: rgba(11,11,11,.035); border: 1px solid rgba(11,11,11,.07); overflow: hidden; will-change: transform; }
.hui_env-to { display: flex; align-items: baseline; gap: 6px; min-width: 0; opacity: 0; }
.hui_env-key { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8A8F98; line-height: normal; }
.hui_env-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; letter-spacing: -0.005em; color: #1D1D22; line-height: normal; }
.hui_env-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #1D1D22; opacity: 0; line-height: normal; }
.hui_env-link { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 8px; background: rgba(32,90,227,.08); border: 1px solid rgba(32,90,227,.22); color: #205AE3; font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; line-height: normal; }
.hui_env-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, rgba(32,90,227,0), rgba(32,90,227,.10), rgba(32,90,227,0)); opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* upload card (Automate) */
.hui_up { position: relative; width: 68%; min-width: 184px; display: flex; flex-direction: column; gap: 8px; padding: 10px 11px 11px; }
.hui_up-name { font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,.82); line-height: normal; }
.hui_up-zone { position: relative; display: grid; min-height: 58px; padding: 9px 10px; border-radius: 10px; border: 1.5px dashed rgba(255,255,255,.42); background: rgba(255,255,255,.06); }
.hui_up-zone > * { grid-area: 1 / 1; }
.hui_up-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #FFFFFF; font-size: 12px; letter-spacing: -0.005em; text-align: center; line-height: normal; }
.hui_up-file-list { display: flex; flex-direction: column; gap: 7px; opacity: 0; }
.hui_up-file-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hui_up-file { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 28px; border-radius: 5px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #FFFFFF; }
.hui_up-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hui_up-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; letter-spacing: -0.005em; color: #FFFFFF; line-height: normal; }
.hui_up-pct { flex: 0 0 auto; font-size: 11px; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
.hui_up-track { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.hui_up-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 4px; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.hui_up-state { display: grid; align-items: center; min-height: 16px; }
.hui_up-state > * { grid-area: 1 / 1; }
.hui_up-load { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.82); line-height: normal; }
.hui_up-done { display: flex; align-items: center; gap: 7px; opacity: 0; font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: #FFFFFF; line-height: normal; }
.hui_up-ring { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #0EA963; }
.hui_up-ghost { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.hui_up-chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 10px 24px rgba(3,8,26,.3); color: #1D1D22; font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; transform: translate(-50%,-50%); line-height: normal; }
.hui_up-cursor { position: absolute; left: 20px; top: 4px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(3,8,26,.35)); }

/* Deputy Agent form (light in Automate, dark in Augment) */
.hui_dep { position: relative; display: flex; flex-direction: column; gap: 11px; padding: 14px 15px 13px; }
.hui_dep.is-light { width: 72%; min-width: 220px; max-width: 280px; }
.hui_dep-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: #1D1D22; line-height: normal; }
.hui_panel .hui_dep-title { color: #F2F3F6; }
.hui_dep-home { flex: 0 0 auto; width: 16px; height: 16px; }
.hui_dep-task { margin: 0; font-size: 12.5px; line-height: 1.45; letter-spacing: -0.005em; color: #5A606B; text-wrap: pretty; }
.hui_panel .hui_dep-task { color: #D5D9E2; }
.hui_dep-tiles { display: flex; flex-direction: column; gap: 6px; }
.hui_dep-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 34px 9px 10px; border-radius: 10px; background: rgba(11,11,11,.035); border: 1px solid rgba(11,11,11,.07); min-width: 0; }
.hui_panel .hui_dep-tile { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11); }
.hui_dep-key { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8A8F98; line-height: normal; }
.hui_panel .hui_dep-key { color: rgba(213,217,226,.62); }
.hui_dep-cell { display: grid; min-height: 19px; align-items: center; justify-items: start; }
.hui_dep-cell > * { grid-area: 1 / 1; }
.hui_dep-skel { display: block; height: 8px; border-radius: 4px; background: rgba(11,11,11,.09); }
.hui_panel .hui_dep-skel { background: rgba(255,255,255,.12); }
.hui_dep-await { display: flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 8px; background: rgba(252,181,108,.16); border: 1px solid rgba(232,140,48,.38); color: #9A4F06; font-size: 11.5px; font-weight: 500; white-space: nowrap; line-height: normal; }
.hui_dep-await-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 999px; background: #E88C30; }
.hui_dep-val { font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; color: #1D1D22; font-variant-numeric: tabular-nums; opacity: 0; min-width: 0; text-wrap: pretty; }
.hui_panel .hui_dep-val { color: #EDEFF4; }
.hui_dep-sub { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #5A606B; opacity: 0; line-height: normal; }
.hui_dep-done { display: flex; align-items: center; gap: 7px; min-width: 0; opacity: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: #0B7A3B; line-height: normal; }
.hui_dep-ring { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #22C55E; }
/* Augment: status pill sits in the title row */
.hui_dep-status { flex: 0 1 auto; min-width: 0; margin-left: auto; display: grid; justify-items: end; min-height: 22px; align-items: center; }
.hui_dep-status > * { grid-area: 1 / 1; }
.hui_dep-status .hui_dep-sub { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 11px; color: #D9DCE4; white-space: nowrap; }
.hui_dep-status .hui_dep-done { gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 11px; color: #FFFFFF; white-space: nowrap; }

/* SMS bubble (Automate) */
.hui_sms { will-change: transform; }
.hui_sms-plane { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; color: #205AE3; will-change: transform, opacity; }

/* ---------- Designer preview (scripts don't run in the Designer) ---------- */
html.wf-design-mode .hui_col { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 24px; }
html.wf-design-mode .hui_col.is-aug-right { justify-content: flex-start; padding-top: 24px; }
html.wf-design-mode .hui_row { position: relative; visibility: visible; }
html.wf-design-mode .hui_morph { height: auto !important; }
html.wf-design-mode .hui_morph-b { display: none; }
html.wf-design-mode .hui_morph-a { position: relative; }