/* B268 · the home hero, one moment told well: the ask in Teams behind, the yes in front. The front card is the object on
   the page: CultureAI's draft waiting on a person, the press of Approve, and the number it moved, drawn as a ring that climbs
   to the target. Without script, or with reduced motion, the card rests on the result. */
.hx4-where{display:flex;align-items:center;gap:9px;margin:24px 0 0;font:500 14px/1.4 var(--px-sans);color:#3a4766}
.hx4-where::before{content:"";width:8px;height:8px;border-radius:50%;background:#1559f5;box-shadow:0 0 0 4px rgba(21,89,245,.16)}

.hx5{position:relative;height:600px;max-width:600px;width:100%;justify-self:end;font-family:var(--px-sans)}

/* the ask, in Teams, behind */
.hx5-thread{position:absolute;left:0;top:18px;width:430px;border-radius:18px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px rgba(11,21,48,.45),0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(11,21,48,.05);overflow:hidden}
.hx5-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-bottom:1px solid rgba(11,21,48,.06)}
.hx5-bar i{width:8px;height:8px;border-radius:50%;background:#d6dbe7}
.hx5-bar b{margin-left:8px;font-weight:600;font-size:13px;color:#0a1633}
.hx5-bar span{margin-left:auto;font-size:11.5px;font-weight:500;color:#5b5fc7}
.hx5-msg{display:flex;gap:11px;padding:14px 18px 4px;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.hx5-m2{padding-bottom:20px}
.hx5-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#7b61ff;color:#fff;font-size:11px;font-weight:600}
.hx5-av.ai{background:#eef3ff}
.hx5 .hx5-av.ai img{width:11px!important;height:auto!important}
.hx5-msg p{margin:0;font-size:13.5px;line-height:1.45;color:#22304f}
.hx5-msg b{font-weight:500;color:#1559f5}
.hx5-who{margin:0 0 3px!important;font-weight:600;font-size:12.5px!important;color:#0a1633!important}
.hx5-who small{margin-left:6px;font-weight:400;color:#7a849b}
.hx5-who em{font-style:normal;font-size:10.5px;font-weight:500;color:#5b5fc7;background:#eceefb;padding:1px 6px;border-radius:5px;margin-left:4px}
.hx5-say{font-family:"Source Serif 4",Georgia,serif!important;font-size:14.5px!important;line-height:1.5!important}
.hx5-typing{position:absolute;left:59px;bottom:22px;display:none;gap:4px;padding:8px 10px;border-radius:12px;background:#eef1f8}
.hx5-typing i{width:6px;height:6px;border-radius:50%;background:#8b95ad;animation:hx5dot 1s infinite}
.hx5-typing i:nth-child(2){animation-delay:.15s}.hx5-typing i:nth-child(3){animation-delay:.3s}
@keyframes hx5dot{50%{transform:translateY(-3px);opacity:.5}}

/* the yes, in front */
.hx5-card{position:absolute;right:0;bottom:24px;width:400px;border-radius:24px;background:#fff;padding:22px 24px 24px;
  box-shadow:0 60px 120px -40px rgba(11,21,48,.55),0 24px 48px -30px rgba(21,89,245,.45),0 0 0 1px rgba(11,21,48,.06);
  transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.hx5-head{display:flex;align-items:center;gap:11px}
.hx5-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#eef3ff}
.hx5 .hx5-mark img{width:13px!important;height:auto!important}
.hx5-head b{display:block;font-weight:600;font-size:14px;color:#0a1633}
.hx5-head small{font-size:12px;color:#6b7690}
.hx5-st{margin-left:auto;font-style:normal;font-size:12px;font-weight:500;padding:5px 11px;border-radius:99px;white-space:nowrap}
.hx5-st-wait{background:#0a1633;color:#fff}
.hx5-st-sent{background:#eef3ff;color:#1559f5}
.hx5-ask,.hx5-done{transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.hx5-q{margin:18px 0 0;font:600 21px/1.25 var(--px-sans);letter-spacing:-.015em;color:#0a1633;text-wrap:balance}
.hx5-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0}
.hx5-nums div{padding:10px 12px;border-radius:12px;background:#f4f6fb}
.hx5-nums dt{font-size:11.5px;color:#6b7690}
.hx5-nums dd{margin:2px 0 0;font-size:20px;font-weight:600;color:#0a1633;font-variant-numeric:tabular-nums}
.hx5-btns{display:flex;gap:8px;margin:18px 0 0}
.hx5-btns span{padding:10px 15px;border-radius:12px;font-size:13.5px;font-weight:500;color:#3a4766;box-shadow:0 0 0 1px #e3e7f0;transition:transform .2s,box-shadow .25s}
.hx5-btns .pri{flex:1;text-align:center;background:#1559f5;color:#fff;box-shadow:0 12px 24px -12px rgba(21,89,245,.9)}
.hx5-btns .pri.press{transform:scale(.96);box-shadow:0 0 0 6px rgba(21,89,245,.2)}
.hx5-done{position:relative;margin:18px 0 0;display:grid;grid-template-columns:132px 1fr;gap:4px 20px;align-items:center}
.hx5-ring{width:132px;height:132px;transform:rotate(-90deg)}
.hx5-ring circle{fill:none;stroke-width:10}
.hx5-ring-t{stroke:#eef1f7}
.hx5-ring-v{stroke:#1559f5;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:15.7;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.hx5-ring-tgt{stroke:#0a1633;stroke-width:2.5;stroke-linecap:round}
.hx5-k{margin:0;font-size:12.5px;color:#6b7690}
.hx5-big{margin:4px 0 0;display:flex;align-items:baseline;gap:8px}
.hx5-big strong{font-size:48px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#0a1633;font-variant-numeric:tabular-nums}
.hx5-big span{font-size:13px;color:#6b7690}
.hx5-ok{margin:8px 0 0;font-size:13px;font-weight:500;color:#1559f5}
.hx5-log{grid-column:1/-1;margin:14px 0 0;padding:11px 14px;border-radius:12px;background:#f4f6fb;font-size:12.5px;color:#3a4766}

/* resting state (no script, reduced motion, and the end of each play): the result */
.hx5:not(.p) .hx5-ask{position:absolute;left:24px;right:24px;top:76px;opacity:0;transform:translateY(-8px);pointer-events:none}
.hx5:not(.p) .hx5-st-wait{display:none}
.hx5.p .hx5-st-sent{display:none}
.hx5.p .hx5-done{position:absolute;left:24px;right:24px;top:76px;margin:0;opacity:0;transform:translateY(10px)}
.hx5.p .hx5-ring-v{stroke-dashoffset:37.7}
/* the play */
.hx5.p:not(.t1) .hx5-m1,.hx5.p:not(.t2) .hx5-m2{opacity:0;transform:translateY(8px)}
.hx5.p.t1:not(.t2) .hx5-typing{display:flex}
.hx5.p:not(.t3) .hx5-card{opacity:0;transform:translateY(26px) scale(.98)}
.hx5.p .hx5-ring-v{transition:none}

.hx5-replay{position:absolute;left:0;bottom:24px;border:0;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(11,21,48,.08);color:#1559f5;font:500 12.5px/1 var(--px-sans);cursor:pointer}
.hx5-replay:focus-visible{outline:2px solid #1559f5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hx5-replay{display:none}.hx5-typing i{animation:none}}

@media (max-width:1100px){.hx5{justify-self:stretch;max-width:none;height:560px}.hx5-thread{width:400px}}
@media (max-width:900px){
  .hx5{height:auto;margin-top:24px;display:grid;gap:0}
  .hx5-thread{position:relative;top:auto;width:auto;margin:0 18px}
  .hx5-card{position:relative;bottom:auto;right:auto;width:auto;margin:-26px 0 0}
  .hx5-replay{position:static;justify-self:start;margin:12px 0 0}
}
@media (max-width:440px){
  .hx5-card{padding:18px 18px 20px;border-radius:20px}
  .hx5-q{font-size:18px}
  .hx5-done{grid-template-columns:96px 1fr;gap:4px 14px}
  .hx5:not(.p) .hx5-ask,.hx5.p .hx5-done{left:18px;right:18px;top:70px}
  .hx5-ring{width:96px;height:96px}
  .hx5-big strong{font-size:38px}
  .hx5-nums dd{font-size:17px}
  .hx5-btns span{padding:9px 11px;font-size:12.5px}
}
.hx5-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}