/* Shared annotation language. SVG paths stay visible when scripts are unavailable. */
.pencil-word{display:inline-block;position:relative;isolation:isolate;white-space:nowrap}
.pencil-art{display:block;overflow:visible;pointer-events:none;color:#72984e}
.pencil-art.blue{color:#4b82b8}.pencil-art.graphite{color:#7c857a}
.pencil-stroke{stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pencil-stroke:nth-child(2){stroke-width:1.35;opacity:.5}
.pencil-art.underline{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;z-index:-1}
.pencil-art.circle{position:absolute;inset:-15% -12% auto;width:124%;height:136%;z-index:-1}
.hero-word .pencil-art.underline{bottom:-.13em;height:.28em}
.motion-enabled .pencil-stroke{stroke-dasharray:1;stroke-dashoffset:1}
.motion-enabled .pencil-art.is-drawing .pencil-stroke{animation:pencil-draw var(--draw-duration,1.15s) cubic-bezier(.35,.03,.45,1) var(--draw-delay,.55s) both}
.motion-enabled .pencil-art.is-drawn .pencil-stroke{stroke-dashoffset:0}
@keyframes pencil-draw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.hero-pencil-arrow{position:absolute;right:22px;top:-112px;width:96px;transform:rotate(-8deg);z-index:3;pointer-events:none}
.task-pencil{position:absolute;bottom:-12px;right:43%;width:100px;pointer-events:none;transform:rotate(15deg)}
.team-pencil{position:absolute;right:22px;top:-35px;width:65px;transform:rotate(10deg)}
.team-pencil .pencil-stroke{stroke-width:3.5}
@media(max-width:900px){.hero-pencil-arrow{right:10px;width:80px;top:-93px}.team-pencil{right:24px}.task-pencil{right:39%;bottom:-18px}}
@media(max-width:620px){.hero-pencil-arrow{right:0;top:-61px;width:52px}.hero-pencil-arrow .pencil-stroke{stroke-width:4}.task-pencil{width:69px;right:65%;bottom:-21px}.team-pencil{width:48px;right:17px;top:-27px}}
@media(prefers-reduced-motion:reduce){.motion-enabled .pencil-stroke{animation:none!important;stroke-dashoffset:0!important}}
/* A fine travelling nib follows the real SVG curve, rather than sliding in a straight line. */
.pencil-nib{fill:currentColor;pointer-events:none;opacity:0}
.pencil-nib path{stroke:none}
.motion-enabled .scene{transition:opacity .85s cubic-bezier(.22,1,.36,1),translate 1.1s cubic-bezier(.22,1,.36,1)}
.motion-enabled .scene:not(.is-visible){translate:0 14px}
@media(prefers-reduced-motion:reduce){.pencil-nib{display:none!important}}
/* Bold marker-like annotations, with a lighter second hand-drawn pass. */
.pencil-stroke{stroke-width:6;opacity:.92}
.pencil-stroke:nth-child(2){stroke-width:3.6;opacity:.58}
.team-pencil .pencil-stroke{stroke-width:6.5}
@media(max-width:620px){.pencil-stroke{stroke-width:6.5}.pencil-stroke:nth-child(2){stroke-width:4}.hero-pencil-arrow .pencil-stroke{stroke-width:6}.team-pencil .pencil-stroke{stroke-width:6.5}}