/* USE-CASE CONVERSATION SECTION — shared by landing and the /solutions pages.
   Desktop: role rows on the left, a live glass conversation panel on the right,
   tool strip under the panel. Phones (<=940px): the open role becomes a white
   role card + glass chat card with the remaining roles listed under it, and
   usecases-v2.js MOVES the conversation element into the active card.
   Everything is scoped to #usecases. */
/* Glass conversation stage — landing only. The shared use-case CSS/JS still
   drives the composer stage on the /solutions pages, so everything here is
   scoped to #usecases and rides on the DS .exp-card glass chat.
   Simplified layout: title → role pill rail → conversation card → tools line.
   One conversation per role; no suggestion chips, no per-role tool swap. */
/* side-by-side: role list (name + one-line summary of its tasks) · square chat.
   The shared 360px/1120px grid made a 695px square — cap the card column at
   560 and centre the pair instead. */
/* desktop-only: the id-scoped rule outranks the shared ≤940px 1fr stack,
   so it must not leak there (it shoved the card off-canvas on phones) */
@media (min-width: 941px) {
  /* the demo column matches the role list: stretch the row, then the panel
     takes whatever height the strip doesn't, so panel + strip == list */
  #usecases .ucx-cols { max-width: 1180px; grid-template-columns: 296px minmax(0, 700px); justify-content: center; align-items: stretch; }
  #usecases .ucx-right { justify-content: space-between; }
  #usecases .ucx-aura { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  /* the tool strip belongs to the demo: it lives in .ucx-right with the panel,
     so it can never be pushed down by the role list's height or by the grid's
     4.5vw row-gap — both of which were opening ~85px of dead space under it. */
  #usecases .ucx-right { display: flex; flex-direction: column; }
  #usecases .ucx-cols .ucx-stack { margin: 18px 0 0; max-width: none; }
  #usecases .ucx-cards { display: none; }
}
/* the aura panel IS the glow now — the stage's own halo would double it up */
#usecases .ucx-stage--conv::before { display: none; }
#usecases .ucx-stage--conv { width: 100%; margin: 0 auto; }
/* role rows take the Solutions-menu .dep shape: name over a sub-line, the
   selected row lifted onto a white card */
#usecases .ucx-rlist { gap: 4px; }
#usecases .ucx-r { padding: 12px 14px; border: none; border-radius: 12px; }
#usecases .ucx-r.on { background: #fff; box-shadow: 0 4px 14px rgba(29,38,48,.10); }
/* selected label stays ink — the gradient is reserved for CTAs and the
   countdown hairline, which already marks the active row */
#usecases .ucx-r.on b { background: none; -webkit-text-fill-color: currentColor; color: var(--ink-900); }
/* aura panel — the nav dropdown's .tpane: brand radials behind a frosted
   sheet holding the conversation and the proof beside it */
/* no outer shell: the conversation card is already a glass container, so an
   aura panel and a frosted sheet around it stacked three frames deep. The
   conversation and the proof simply sit side by side on the section. */
#usecases .ucx-aura { position: relative; }
#usecases .ucx-aura-in { display: block; }
@media (min-width: 941px) and (max-width: 1180px) {
    /* label + 10 logos don't fit one row in the narrower column — stack them */
  #usecases .ucx-cols .ucx-stack { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* countdown — the brand gradient hairline under the active role, filled
   straight from the JS countdown (usecases-v2.js ticks --ucx-p 0→1 across the
   role's turn). The shared rule reads --ucx-p0 and is driven by a keyframe;
   here the value IS the progress, so no animation is involved. */
#usecases .ucx-r.on::after { transform: scaleX(var(--ucx-p, 0)); }
#usecases .ucx-rh { display: flex; align-items: center; gap: 8px; }
/* r=8 → circumference 50.27; --ucx-p is the fraction of the role's turn spent */
/* role subs — sub-role names at rest; the selected role expands to the longer,
   plain-english line (soft fade-in, no height animation) */
#usecases .ucx-r .sub-l { display: none; }
#usecases .ucx-r.on .sub-s { display: none; }
/* collapsed rows are one line (menu voice); the open row expands to at most
   three — clamped so a long line can never push the list past the panel */
#usecases .ucx-r .sub-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usecases .ucx-r.on .sub-l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; animation: ucxSubIn .32s ease both; }
@keyframes ucxSubIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #usecases .ucx-r.on .sub-l { animation: none; } }
#usecases .ucx-conv { position: relative; height: 372px; padding: 20px; border-radius: 20px; display: flex; flex-direction: column; }
/* chat reads from the top — the ask leads, air sits below the answer */
#usecases .ucx-conv .thread { gap: 16px; justify-content: flex-start; }
#usecases .ucx-conv .msg .body { max-width: 100%; }
#usecases .ucx-conv .msg .avatar { width: 38px; height: 38px; }
#usecases .ucx-conv .msg .text { font-size: 15px; line-height: 1.65; }
#usecases .ucx-conv .msg.minded .text { font-size: 15.5px; }
/* the answer is typed as inline content (no .text wrapper), so undo the
   flex-column .m-result default — same treatment as the DS .cw-run answer.
   display lives on .done only: an id-scoped `display:block` would out-specify
   `.m-thread:not(.done) .m-result{display:none}` and make the answer reserve
   its full height behind the streaming trace. */
#usecases .ucx-conv .m-result { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; color: var(--ink-900); }
#usecases .ucx-conv .m-thread.done .m-result { display: block; }
/* Minded only speaks once the ask has finished typing */
#usecases .ucx-conv .m-thread { opacity: 0; transform: translateY(8px); transition: opacity .38s ease, transform .45s cubic-bezier(.16,1,.3,1); }
#usecases .ucx-conv .m-thread.live { opacity: 1; transform: none; }
/* phones: compact chat (Slack-compact idiom) so the square holds — the avatar
   column ate 44px of a 322px line, wrapping the ask to 5+ lines. The coin now
   sits inline in the bubble's name row and the bubble takes the full width. */
/* ---- phones: option E. The whole desktop apparatus (role rows, aura panel,
   live conversation, countdown) is replaced by one already-answered card per
   role in a snap carousel — the testimonial-slider idiom. Nothing to pick,
   nothing to wait for. ---- */
@media (max-width: 940px) {
  /* option D on a phone: the selected role sits on top as a card with its live
     conversation, and the roles you haven't picked list underneath it. DOM
     order already gives cards → list → tools, so nothing needs re-ordering. */
  #usecases .ucx-stage--conv { display: none; }
  /* strip belongs to the demo above it, so it comes before the role list */
  /* align-items:center comes from the shared rule and, once this is a column
     flex, centres children on the CROSS axis: both columns shrank to content
     width and sat indented from the cards above */
  #usecases .ucx-cols { display: flex; flex-direction: column; align-items: stretch; }
  #usecases .ucx-right { order: -1; }
  #usecases .ucx-cols .ucx-stack { margin-top: 14px; }
  #usecases .ucx-left { display: block; margin-top: 22px; }
  /* the open role is the card above — don't repeat it in the list */
  #usecases .ucx-rlist { display: flex; flex-direction: column; gap: 2px; }
  /* :not(:focus-visible) so activating a role by keyboard doesn't delete the very
     element focus is sitting on (which also dropped the focusin pause). Pointer
     clicks don't match :focus-visible, so they still collapse the row. */
  #usecases .ucx-r.on:not(:focus-visible) { display: none; }
  #usecases .ucx-rlist .ucx-r { animation: ucxRowIn .34s ease both; }
  @keyframes ucxRowIn { from { opacity: 0; } to { opacity: 1; } }
  #usecases .ucx-r { padding: 11px 12px; border-radius: 12px; }
  #usecases .ucx-r b { font-size: 15px; }
  #usecases .ucx-r .sub-l { display: none; }
  #usecases .ucx-cards { display: block; margin: 4px 0 0; }
  #usecases .ucx-card:not(.on) { display: none; }
  /* two cards, same split as desktop: a white role card (the role row's
     equivalent) and, under it, the glass conversation */
  #usecases .ucx-card { width: 100%; display: flex; flex-direction: column; gap: 10px; }
  /* only the open card renders, so a CSS transition can't cross the swap —
     replay an entrance instead, and stagger the chat under the role card */
  #usecases .ucx-card.on { animation: ucxCardIn .4s cubic-bezier(.16,1,.3,1) both; }
  #usecases .ucx-card.on .cbody { animation: ucxCardIn .46s cubic-bezier(.16,1,.3,1) .06s both; }
  @keyframes ucxCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  #usecases .ucx-card .crole { position: relative; overflow: hidden; background: #fff;
    border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(29,38,48,.10); }
  /* countdown runs under the role card, same as the desktop rows */
  #usecases .ucx-card.on .crole::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #FFAC6F, #FF5F34 50%, #E43CFF);
    transform: scaleX(var(--ucx-p, 0)); transform-origin: left center; }
  /* the live stage is moved in here; the static copy hides while it plays */
  #usecases .ucx-card.on .cstatic { display: none; }
  #usecases .ucx-card .ucx-conv { display: flex; height: 324px; width: 100%; padding: 0; border: none; border-radius: 0; box-shadow: none; background: none; background-image: none; }
  #usecases .ucx-card .ucx-conv .thread { gap: 10px; justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
  #usecases .ucx-card .ucx-conv .msg .text { font-size: 12.5px; line-height: 1.5; }
  #usecases .ucx-card .ucx-conv .m-result { font-size: 13px; line-height: 1.5; }
  #usecases .ucx-card .ucx-conv .m-trace .step { padding-bottom: 9px; }
  #usecases .ucx-card .ucx-conv .m-stream .shimline { margin-bottom: 5px; }
  #usecases .ucx-card .ch { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
  #usecases .ucx-card .ch b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  #usecases .ucx-card .cs { font-size: 12.5px; line-height: 1.5; color: var(--slate-600); margin: 0 0 12px; }
  #usecases .ucx-card .cbody { flex: 1; min-height: 0; border-radius: 18px; padding: 14px;
    border: 1px solid rgba(255,255,255,.75);
    background-image: radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,.55), transparent 55%),
      radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,.34), transparent 55%),
      linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%); }
  #usecases .ucx-card .ch { margin-bottom: 2px; }
  #usecases .ucx-card .cs { margin: 0; color: var(--slate-600); }
  #usecases .ucx-card .thread { display: flex; flex-direction: column; gap: 10px; }
  #usecases .ucx-card .msg { position: relative; gap: 0; }
  #usecases .ucx-card .msg .avatar { position: absolute; top: 8px; left: 11px; width: 19px; height: 19px; z-index: 2; box-shadow: 0 1px 4px rgba(29,38,48,.2); }
  #usecases .ucx-card .msg .body { width: 100%; max-width: 100%; padding: 8px 11px 10px; }
  #usecases .ucx-card .msg .mhead { padding-left: 25px; margin-bottom: 2px; }
  #usecases .ucx-card .msg .text { font-size: 12.5px; line-height: 1.5; }
  #usecases .ucx-card .sum { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--fg3); margin-bottom: 5px; }
  #usecases .ucx-card .sum svg { width: 14px; height: 14px; }
  #usecases .ucx-card .ans { font-family: var(--font-serif); font-size: 13px; line-height: 1.5; color: var(--ink-900); }
  #usecases .ucx-card .tchip { font-size: 11px; }
  #usecases .ucx-card .tchip img { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #usecases .ucx-conv .m-thread { opacity: 1; transform: none; transition: none; }
  /* the phone entrance replays on every role swap — same opt-out the rest of
     the section's motion already honours */
  #usecases .ucx-rlist .ucx-r,
  #usecases .ucx-card.on,
  #usecases .ucx-card.on .cbody { animation: none; }
}