.mt-caps{background:var(--cream)}

.mt-caps .u-h2{text-wrap:balance}

.mt-caps-list{position:relative;list-style:none;padding:0;margin:var(--sp-flow) 0 0}
.mt-caps-list::before{content:"";position:absolute;inset-block:0;
   inset-inline-start:22px;width:2px;border-radius:var(--r-pill);
   transform-origin:50% 0;
   background:linear-gradient(180deg,
     rgba(25,92,255,0) 0%,rgba(25,92,255,.35) 12%,
     rgba(25,92,255,.35) 88%,rgba(25,92,255,0) 100%)}
.mt-cap{display:grid;grid-template-columns:46px minmax(0,1fr);
   gap:var(--sp-6);align-items:start}
.mt-cap > *{min-width:0}
.mt-cap + .mt-cap{margin-block-start:var(--sp-12)}

.mt-cap-node{position:relative;z-index:2;margin-block-start:var(--sp-6);
   filter:drop-shadow(0 12px 22px rgba(25,92,255,.22))}

.is-in .mt-caps-list::before{animation:mt-draw .9s var(--ease-sweep) both}
.is-in .mt-cap-node{animation:mt-land .45s var(--ease-pop) both;
   animation-delay:calc(var(--d, 0s) - 60ms)}

.is-in .mt-cap-node--rec{animation:mt-land .45s var(--ease-pop) both,
   mt-rec-land 1.1s var(--ease) both;
   animation-delay:calc(var(--d, 0s) - 60ms)}

@keyframes mt-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mt-cardin{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes mt-land{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}
@keyframes mt-rec-land{
  0%,26%{filter:drop-shadow(0 12px 22px rgba(252,61,67,.35))}
  100%{filter:drop-shadow(0 12px 22px rgba(25,92,255,.22))}
}

@supports (animation-timeline: view()) {
  .mt-caps-list::before,
  .is-in .mt-caps-list::before{animation:mt-draw linear both;
     animation-timeline:view();animation-range:cover 6% cover 86%;
     animation-delay:0s}
  .mt-cap-node,
  .is-in .mt-cap-node{animation:mt-land linear both;
     animation-timeline:view();animation-range:entry 26% entry 94%;
     animation-delay:0s}
  .mt-cap-node--rec,
  .is-in .mt-cap-node--rec{animation:mt-land linear both,mt-rec-land linear both;
     animation-timeline:view(),view();
     animation-range:entry 26% entry 94%,entry 40% cover 22%;
     animation-delay:0s}

  .mt-cap-card{animation:mt-cardin linear both;
     animation-timeline:view();animation-range:entry 12% entry 80%}
  :where(html.js) .mt-cap-card.u-rise{transition:none}
}
.mt-cap-node .u-tcface{justify-content:center;padding-inline:var(--sp-3)}

.mt-cap-ic{display:block;width:20px;height:20px;color:var(--blue);
   fill:none;stroke:currentColor;stroke-width:1.5;
   stroke-linecap:round;stroke-linejoin:round}
.mt-cap-ic .f{fill:currentColor;stroke:none}

.mt-cap-ic--rec{color:var(--red)}

.mt-cap-card{padding:var(--sp-8)}
.mt-cap-h{margin:var(--sp-2) 0 0;font-size:var(--fs-feature);
   font-weight:var(--fw-bold);line-height:var(--lh-card);color:#000;
   text-wrap:balance}

.mt-cap-h .u-mark{color:#000}
.mt-cap-p{margin:var(--sp-6) 0 0;font-size:var(--fs-body);
   line-height:var(--lh-body);color:#000;max-width:min(68ch,100%)}
.mt-cap-p + .mt-cap-p{margin-block-start:var(--sp-4)}

@media(max-width:640px){
  .mt-caps-list::before{inset-inline-start:16px}
  .mt-cap{grid-template-columns:34px minmax(0,1fr);gap:var(--sp-3)}
  .mt-cap-node{margin-block-start:var(--sp-4)}
  .mt-cap-node .u-tcface{height:34px;padding-inline:var(--sp-2)}
  .mt-cap-ic{width:16px;height:16px}
  .mt-cap-card{padding:var(--sp-6)}
  .mt-cap + .mt-cap{margin-block-start:var(--sp-8)}
}

@media(max-width:640px){
  .mt-cap:nth-child(4) .mt-cap-h{margin-inline:calc(-1 * var(--sp-2))}
}

@media(max-width:380px){
  .mt-cap:nth-child(4) .mt-cap-h{font-size:var(--fs-title)}
}