/* Quiet, single-play data illustrations for the three promises. */
.metric-grid .metric{min-height:455px}
.performance-demo,.creator-inbox-demo,.fit-demo{
  position:absolute;
  right:25px;
  bottom:25px;
  left:25px;
  height:154px;
  border-top:1px solid #e3e8ef;
  color:#344153;
  font-variant-numeric:tabular-nums;
}
.inbox-heading,.fit-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:41px;
  color:#778292;
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
}
.performance-demo{
  box-sizing:border-box;
  height:178px;
  padding:16px;
  border:1px solid #2a3142;
  border-radius:19px;
  background:#151c2b;
  box-shadow:0 14px 25px #15294a1a;
  color:#f3f6fc;
}
.script-heading{display:flex;align-items:center;gap:9px;height:19px;font-size:12px;font-weight:650}
.script-icon{position:relative;box-sizing:border-box;width:12px;height:15px;border:1px solid #8caefa;border-radius:2px}
.script-icon::before,.script-icon::after{content:"";position:absolute;left:2px;right:2px;height:1px;background:#8caefa}
.script-icon::before{top:5px}.script-icon::after{top:9px}
.script-preview{
  display:flex;
  align-items:center;
  height:34px;
  margin-top:10px;
  padding:0 12px;
  border:1px solid #343c4c;
  border-radius:9px;
  background:#202838;
  color:#c2cad7;
  font-size:11px;
}
.script-terms{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.script-terms>div{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
  min-width:0;
  height:68px;
  padding:9px 11px;
  border:1px solid #343c4c;
  border-radius:10px;
  background:#1a2231;
}
.script-terms small{color:#a7b2c3;font-size:10px;line-height:1.1}
.script-terms strong{color:#9abbff;font-size:21px;font-weight:650;line-height:1}
.fit-row i{
  display:block;
  height:3px;
  overflow:hidden;
  background:#e5eaf0;
  font-style:normal;
}
.fit-row i b{
  display:block;
  width:26%;
  height:100%;
  background:#aab7c8;
  transform-origin:left center;
}

.creator-inbox-demo{height:176px}
.inbox-heading{height:64px;gap:10px;color:#344153;font-size:12px;line-height:1.25}
.inbox-heading>span{max-width:19ch}
.creator-avatars{display:flex;align-items:center;flex:none;padding-left:8px}
.creator-avatars span{
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:27px;
  height:27px;
  margin-left:-8px;
  border:2px solid #fff;
  border-radius:50%;
  background:#dce8f9;
  color:#345788;
  font-size:10px;
  font-weight:700;
}
.creator-avatars span:nth-child(2){background:#dcece8;color:#386c62}
.creator-avatars span:nth-child(3){background:#eee5dc;color:#7b6049}
.inbox-creators{border-top:1px solid #edf0f4}
.inbox-creator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:37px;
  border-bottom:1px solid #edf0f4;
  color:#344153;
  font-size:12px;
}
.inbox-creator em{color:#818d9d;font-size:11px;font-style:normal}

.fit-heading{height:35px}
.fit-row{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) 36px;
  align-items:center;
  gap:11px;
  height:25px;
  color:#7c8898;
  font-size:11px;
}
.fit-row i b{width:19%}
.fit-row:nth-of-type(3) i b{width:42%}
.fit-row:nth-of-type(4) i b{width:88%}
.fit-row small{font-size:10px;text-align:right}
.fit-winner{color:#285cb2;font-weight:650}
.fit-winner i b{background:#2b68d8}
.fit-result{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #edf0f4;
  color:#285cb2;
  font-size:11px;
  font-weight:600;
}
.fit-result::before{content:"";display:inline-block;width:9px;height:5px;margin:0 8px 1px 1px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}

.metric.in-view .performance-demo{animation:script-enter .65s cubic-bezier(.2,.7,.2,1) both}
.metric.in-view .script-terms>div{animation:metric-result-enter .45s ease-out both}
.metric.in-view .script-terms>div:first-child{animation-delay:.38s}
.metric.in-view .script-terms>div:last-child{animation-delay:.55s}
.metric.in-view .fit-row i b{
  animation:metric-line-draw .85s cubic-bezier(.25,.7,.2,1) both;
}
.metric.in-view .fit-row:nth-of-type(3) i b{animation-delay:.16s}
.metric.in-view .fit-row:nth-of-type(4) i b{animation-delay:.32s}
.metric.in-view .inbox-creator{animation:metric-row-enter .48s ease-out both}
.metric.in-view .inbox-creator:nth-child(2){animation-delay:.2s}
.metric.in-view .inbox-creator:nth-child(3){animation-delay:.4s}
.metric.in-view .creator-avatars span{animation:metric-result-enter .4s ease-out both}
.metric.in-view .creator-avatars span:nth-child(2){animation-delay:.2s}
.metric.in-view .creator-avatars span:nth-child(3){animation-delay:.4s}
.metric.in-view .fit-result{animation:metric-result-enter .42s ease-out .9s both}
@keyframes metric-line-draw{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
@keyframes script-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes metric-row-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes metric-result-enter{from{opacity:0}to{opacity:1}}

@media(max-width:800px){.metric-grid .metric{min-height:440px}}
@media(max-width:520px){.metric-grid .metric{min-height:460px}.performance-demo,.creator-inbox-demo,.fit-demo{right:21px;left:21px}}
@media(prefers-reduced-motion:reduce){
  .metric.in-view .performance-demo,
  .metric.in-view .script-terms>div,
  .metric.in-view .fit-row i b,
  .metric.in-view .creator-avatars span,
  .metric.in-view .inbox-creator,
  .metric.in-view .fit-result{animation:none}
}