/* Motion with meaning. Ink flow on headlines (graphite to ink, continuous across lines); key phrases ink in with a
   hairline; icons draw stroke by stroke; numbers count; the steps fill a line as you pass them. */
.fi{--c1:#111;--c0:rgb(17 17 17 / .13);
  background-image:linear-gradient(90deg,var(--c1) 0,var(--c1) calc(var(--p,1) * 112% - 12%),var(--c0) calc(var(--p,1) * 112%),var(--c0) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.soft.fi,.soft .fi{--c1:rgb(17 17 17 / .42);--c0:rgb(17 17 17 / .1)}
.dhero.home h1 .soft.fi{--c1:rgb(17 17 17 / .45)}

/* key phrases: from paragraph grey to ink, with a hairline drawn under */
.key{color:inherit;background:linear-gradient(rgb(17 17 17 / .055),rgb(17 17 17 / .055)) 0 88% / 0 42% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:color .8s ease,background-size 1.1s cubic-bezier(.65,0,.25,1)}
.key.in{color:var(--ink);background-size:100% 42%}

/* drawn icons */
.dw{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.dw *{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.25,1)}
.dw *:nth-child(2){transition-delay:.18s}.dw *:nth-child(3){transition-delay:.34s}.dw *:nth-child(4){transition-delay:.48s}
.dw.in *{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.dw *{stroke-dashoffset:0;transition:none}}

/* steps: icon top right, a line that fills, numbers that light up when the line reaches them */
.steps3{position:relative;border-top:0!important;padding-top:1px}
.steps3 > .st3bar{position:absolute;padding:0;border:0;left:0;right:0;top:0;height:1px;background:var(--line)}
.st3bar i{position:absolute;left:0;top:0;height:1px;width:calc(var(--sp,1) * 100%);background:var(--ink)}
.steps3 > div{position:relative}
.st3i{position:absolute;right:40px;top:44px}
.steps3 > div:last-child .st3i{right:0}
.st3n{transition:color .6s}
.st3n.on{color:var(--ink)}
.st3k b{font-weight:500!important;font-variant-numeric:tabular-nums}

/* jobs: icon above the title */
.jobs .dw{display:block;margin-bottom:28px}
.jobs a:hover .dw{stroke:var(--ink)}

/* security icons */
.sico .dw{width:24px;height:24px}

/* proof counters */
.proof dt b{font-weight:400!important;font-variant-numeric:tabular-nums}

@media (max-width:900px){.st3i{right:0;top:30px}.st3bar{display:none}.steps3{border-top:1px solid var(--line)!important}}
.steps3 > .st3bar + div{padding-left:0!important;border-left:0!important}