/* B267 · the home hero, branded: CultureAI is the app open in Teams (its rocket lit in the rail), and in front of the
   conversation the number it moved, on a CultureAI card, with the Installed pill on the window. */
.hx3{position:relative;padding:0 0 56px 0}
.hx3 .hx2-win{display:grid;grid-template-columns:56px minmax(0,1fr);margin-top:0}
.hx3-main{min-width:0;position:relative}
.hx3-rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0;background:#ebedf5;border-right:1px solid rgba(11,21,48,.06)}
.hx3-rail i{width:22px;height:22px;border-radius:6px;background:#cfd5e4}
.hx3-rail i.r-act{border-radius:50%}
.hx3-rail b{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(21,89,245,.25),0 6px 14px -6px rgba(21,89,245,.6)}
.hx3-rail b::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:2px;background:#1559f5}
.hx3-rail b img{width:15px;height:auto}
.hx3-rail i.r-more{margin-top:auto;background:none;box-shadow:inset 0 0 0 2px #cfd5e4}

/* the number it moved */
.hx3-kpi{position:absolute;left:-44px;bottom:0;width:270px;padding:18px 20px 16px;border-radius:18px;background:#fff;
  box-shadow:0 40px 80px -30px rgba(11,21,48,.5),0 0 0 1px rgba(11,21,48,.07);z-index:3}
.hx3-kpi-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.hx3-kpi-h img{height:18px;width:auto}
.hx3-kpi-h span{font:500 12px/1 var(--px-sans);color:#566074}
.hx3-kpi-k{margin:0;font:500 12px/1.3 var(--px-sans);color:#1559f5}
.hx3-kpi-t{margin:4px 0 0;font:600 15px/1.3 var(--px-sans);color:#0a1633}
.hx3-kpi-v{display:flex;align-items:baseline;gap:6px;margin:8px 0 0}
.hx3-kpi-v b{font:600 34px/1 var(--px-sans);letter-spacing:-.02em;color:#0a1633}
.hx3-kpi-v span{font:400 13px/1 var(--px-sans);color:#566074}
.hx3-kpi-v em{margin-left:auto;font:500 12px/1 var(--px-sans);font-style:normal;padding:5px 10px;border-radius:99px;background:#e8efff;color:#1559f5}
.hx3-bar{position:relative;display:block;height:6px;margin:12px 0 0;border-radius:99px;background:#e6ebf4;overflow:hidden}
.hx3-bar i{position:absolute;inset:0 auto 0 0;width:99%;border-radius:inherit;background:#1559f5}
.hx3-bar::after{content:"";position:absolute;top:0;bottom:0;left:91.6%;width:2px;background:#0a1633}
.hx3-kpi-f{margin:10px 0 0;font:400 12px/1.4 var(--px-sans);color:#566074}

/* the pill, on the window */
.hx3{margin-top:40px}
.hx3-pill{position:absolute!important;right:0;top:-46px;z-index:3;box-shadow:0 14px 30px -12px rgba(11,21,48,.45)}

/* the number climbs once the conversation says yes (the chat script removes .pl when it finishes) */
@media (prefers-reduced-motion:no-preference){
  .hx3:has(.hx2-chat.pl) .hx3-bar i{width:91.6%;background:#0a1633;transition:none}
  .hx3:has(.hx2-chat.pl) .hx3-kpi-v b::before{content:""}
  .hx3 .hx3-bar i{transition:width 1.2s cubic-bezier(.2,.7,.2,1),background .4s}
}

@media (max-width:1100px){.hx3-kpi{left:-20px}}
@media (max-width:900px){
  .hx3{padding:0}
  .hx3 .hx2-win{grid-template-columns:minmax(0,1fr)}
  .hx3-rail{display:none}
  .hx3-kpi{position:relative;left:auto;bottom:auto;width:auto;margin:14px 0 0}
  .hx3{margin-top:48px}.hx3-pill{right:0;top:-44px}
}