/* Homepage tape artwork and typography, extending toward the pricing sidebar. */
.dashboard-page .account-workspace > .account-overview {
  padding-top:12px;
  overflow-x:hidden;
}
.pricing-tape-guide {
  --tape-case-width:60px;
  position:relative;
  width:100%;
  height:92px;
}
.pricing-tape-guide__blade {
  position:absolute;
  left:0;
  right:calc(var(--tape-case-width) - 2px);
  bottom:33px;
  color:#1d1d1f;
  clip-path:inset(-60px 0 -16px 0);
}
/* One moving element keeps the arrow, line and text in lockstep. */
.pricing-tape-guide__moving {
  position:relative;
  box-sizing:border-box;
  width:100%;
  min-height:70px;
  display:flex;
  align-items:flex-end;
  padding:0 12px 6px 32px;
  animation:pricing-tape-extend 1.8s ease-in-out both;
}
.pricing-tape-guide__moving::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:24px;
  background:#3d4f57;
  clip-path:polygon(0 50%, 22px 0, 22px calc(50% - 1.5px), 100% calc(50% - 1.5px), 100% calc(50% + 1.5px), 22px calc(50% + 1.5px), 22px 100%);
}
.pricing-tape-guide__blade p {
  min-width:0;
  margin:0;
  color:#1d1d1f;
  font-size:clamp(16px,2.2vw,27px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.045em;
}
.pricing-tape-guide__case {
  position:absolute;
  right:0;
  bottom:24px;
  width:var(--tape-case-width);
  height:auto;
  z-index:2;
}
.dashboard-page .pricing-tape-guide__blade p {
  font-size:20px;
}
@keyframes pricing-tape-extend {
  from { transform:translateX(calc(100% - 22px)); }
  to { transform:translateX(0); }
}
@media (prefers-reduced-motion:reduce) {
  .pricing-tape-guide__moving { animation:none; }
}
@media (max-width:700px) {
  .pricing-tape-guide { --tape-case-width:45px; }
  .pricing-tape-guide__blade p { font-size:15px; }
}
