body.home .ngh #experience .ngdp-transform,
body.home .ngh #experience .ngdp-transform * {box-sizing:border-box}
body.home .ngh #experience .ngdp-transform {
width:100%;margin:23px 0 2px;border:1px solid #d6dfd0;border-radius:13px;
background:#fff;box-shadow:0 14px 29px #20212412;overflow:hidden;isolation:isolate;
}
body.home .ngh #experience .ngdp-transform__head {
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
padding:11px 14px;background:#202124;color:#fff;
}
body.home .ngh #experience .ngdp-transform__eyebrow {
display:inline-flex;gap:9px;align-items:center;
font:700 10px/1.2 'Proximanova-bold',sans-serif;letter-spacing:.1em;color:#b5e66a;
}
body.home .ngh #experience .ngdp-transform__eyebrow i {
display:block;width:8px;height:8px;background:#84c041;border-radius:50%;
box-shadow:0 0 0 4px #84c04135;
}
body.home .ngh #experience .ngdp-transform__note {
font:700 9px/1.3 'Proximanova-bold',sans-serif;letter-spacing:.06em;color:#d5ddd0;
}
body.home .ngh #experience .ngdp-transform__frame {
position:relative;height:174px;background:#edf0f1;overflow:hidden;isolation:isolate;
}
body.home .ngh #experience .ngdp-transform__draft,
body.home .ngh #experience .ngdp-transform__finish {
position:absolute;inset:0;overflow:hidden;
}
body.home .ngh #experience .ngdp-transform__draft {background:#ecf0f1;color:#62676b}
body.home .ngh #experience .ngdp-transform__finish {
z-index:2;background:#fff;color:#202124;clip-path:inset(0 100% 0 0)
}
body.home .ngh #experience .ngdp-transform__browser {
height:29px;padding:0 12px;display:flex;gap:12px;align-items:center;
background:#f7f8f9;border-bottom:1px solid #dce0e2;
}
body.home .ngh #experience .ngdp-transform__draft .ngdp-transform__browser {background:#e4e9ea}
body.home .ngh #experience .ngdp-transform__browser > span:last-child {
font:700 8px/1 'Proximanova-bold',sans-serif;letter-spacing:.1em;color:#62676b;
}
body.home .ngh #experience .ngdp-transform__lights {display:flex;gap:4px}
body.home .ngh #experience .ngdp-transform__lights i {
display:block;width:6px;height:6px;border-radius:50%;background:#bcc1c5;
}
body.home .ngh #experience .ngdp-transform__finish .ngdp-transform__lights i:first-child {background:#84c041}
body.home .ngh #experience .ngdp-transform__layout {
height:145px;padding:13px 16px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;
}
body.home .ngh #experience .ngdp-transform__draftcopy,
body.home .ngh #experience .ngdp-transform__finishcopy {
display:flex;min-width:0;height:100%;flex-direction:column;align-items:flex-start;justify-content:center;
}
body.home .ngh #experience .ngdp-transform__skeleton {
display:block;flex:0 0 auto;background:#c6ced1;border-radius:3px;
}
body.home .ngh #experience .ngdp-transform__skeleton--eyebrow {width:38%;height:5px;margin-bottom:9px}
body.home .ngh #experience .ngdp-transform__skeleton--title,
body.home .ngh #experience .ngdp-transform__skeleton--title2 {
height:12px;background:#a9b6b9;margin-bottom:6px;
}
body.home .ngh #experience .ngdp-transform__skeleton--title {width:88%}
body.home .ngh #experience .ngdp-transform__skeleton--title2 {width:67%;margin-bottom:10px}
body.home .ngh #experience .ngdp-transform__skeleton--line,
body.home .ngh #experience .ngdp-transform__skeleton--line2 {height:5px;margin-bottom:6px}
body.home .ngh #experience .ngdp-transform__skeleton--line {width:94%}
body.home .ngh #experience .ngdp-transform__skeleton--line2 {width:66%;margin-bottom:11px}
body.home .ngh #experience .ngdp-transform__skeleton--button {
width:48%;height:18px;background:#dce3e4;border:1px dashed #9ba9ac;
}
body.home .ngh #experience .ngdp-transform__draftart {
position:relative;height:105px;border:2px dashed #b2bec2;border-radius:7px;
background:repeating-linear-gradient(0deg,transparent 0 19px,#dce4e6 20px 21px),
repeating-linear-gradient(90deg,transparent 0 19px,#dce4e6 20px 21px);
}
body.home .ngh #experience .ngdp-transform__draftart-box {
position:absolute;inset:18px;border:2px solid #bac6c9;border-radius:6px;
}
body.home .ngh #experience .ngdp-transform__draftart-circle {
position:absolute;top:50%;left:50%;width:49px;height:49px;
transform:translate(-50%,-50%);border:2px dashed #a5b3b7;border-radius:50%;background:#e5eaea;
}
body.home .ngh #experience .ngdp-transform__draftart-line {
position:absolute;bottom:15px;left:29%;width:42%;height:5px;border-radius:4px;background:#b9c5c8;
}
body.home .ngh #experience .ngdp-transform__layout--finish {
grid-template-columns:1.04fr .96fr;
background:linear-gradient(110deg,#fff 45%,#f8faef 100%);
}
body.home .ngh #experience .ngdp-transform__finishlabel {
font:700 9px/1.2 'Proximanova-bold',sans-serif;color:#679738;letter-spacing:.08em;margin-bottom:7px;
}
body.home .ngh #experience .ngdp-transform__finishcopy strong {
font:700 clamp(17px,1.72vw,22px)/1.08 'Proximanova-bold',sans-serif;
letter-spacing:-.035em;color:#202124;
}
body.home .ngh #experience .ngdp-transform__finishtext {
font:400 10px/1.25 'Proximanova-regular',sans-serif;color:#62676b;margin-top:7px;
}
body.home .ngh #experience .ngdp-transform__finishbutton {
display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:7px 9px;
background:#84c041;border-radius:4px;color:#202124;white-space:nowrap;
font:700 8px/1 'Proximanova-bold',sans-serif;letter-spacing:.015em;
}
body.home .ngh #experience .ngdp-transform__finishbutton i {font-style:normal;font-size:12px}
body.home .ngh #experience .ngdp-transform__finishart {
position:relative;height:105px;border-radius:8px;overflow:hidden;
background:linear-gradient(140deg,#e3f3d5,#b5e66a);
}
body.home .ngh #experience .ngdp-transform__finishart-glow {
position:absolute;top:-43px;right:-40px;width:128px;height:128px;
border-radius:50%;border:18px solid #84c04147;
}
body.home .ngh #experience .ngdp-transform__finishart-card {
position:absolute;border-radius:5px;background:#fff;box-shadow:0 5px 12px #2021242b;
}
body.home .ngh #experience .ngdp-transform__finishart-card--one {
left:10%;top:18%;width:56%;height:59%;transform:rotate(-8deg);border-top:9px solid #202124;
}
body.home .ngh #experience .ngdp-transform__finishart-card--one::after {
content:'';position:absolute;left:12%;top:25%;width:62%;height:6px;
background:#84c041;border-radius:4px;box-shadow:0 14px 0 #dfead5,0 25px 0 #dfead5;
}
body.home .ngh #experience .ngdp-transform__finishart-card--two {
right:14%;top:24%;width:44%;height:60%;transform:rotate(7deg);border-top:9px solid #679738;
}
body.home .ngh #experience .ngdp-transform__finishart-card--two::after {
content:'';position:absolute;inset:25% 16% 13%;border-radius:4px;
background:linear-gradient(130deg,#b5e66a,#84c041);
}
body.home .ngh #experience .ngdp-transform__finishart-card--three {
right:3%;bottom:6%;width:17%;height:41%;transform:rotate(5deg);
border:2px solid #202124;border-radius:7px;
background:linear-gradient(#202124 0 8px,#fff 8px 100%);
}
body.home .ngh #experience .ngdp-transform__finishart-target {
position:absolute;left:49%;top:27%;width:33px;height:33px;
display:grid;place-items:center;border:2px solid #679738;border-radius:50%;
background:#ffffffba;box-shadow:0 0 0 6px #84c04130;
}
body.home .ngh #experience .ngdp-transform__finishart-target i {
width:11px;height:11px;border-radius:50%;background:#84c041;
}
body.home .ngh #experience .ngdp-transform__reveal {
position:absolute;z-index:4;left:0;top:29px;bottom:0;width:3px;opacity:0;
background:#84c041;box-shadow:0 0 0 3px #b5e66a44,0 0 15px #84c04199;pointer-events:none;
}
body.home .ngh #experience .ngdp-transform__foot {
display:flex;align-items:center;justify-content:space-between;gap:9px;
min-height:29px;padding:7px 14px;background:#fff;border-top:1px solid #e3e8de;
}
body.home .ngh #experience .ngdp-transform__foot > span:first-child,
body.home .ngh #experience .ngdp-transform__foot > span:last-child {
font:700 9px/1.2 'Proximanova-bold',sans-serif;letter-spacing:.09em;color:#62676b;
}
body.home .ngh #experience .ngdp-transform__steps {display:flex;gap:5px;align-items:center}
body.home .ngh #experience .ngdp-transform__steps i {
width:22px;height:3px;border-radius:3px;background:#cbd3c7;
}
body.home .ngh #experience .ngdp-transform__steps i:first-child {background:#84c041}
body.home .ngh #experience .nghd-process__copy .nghd-process__link {margin-top:17px}
@media(prefers-reduced-motion:no-preference) {
body.home .ngh #experience .ngdp-transform__finish {
animation:ngdp-reveal 6.8s cubic-bezier(.42,0,.2,1) infinite;
}
body.home .ngh #experience .ngdp-transform__reveal {
animation:ngdp-wipe-line 6.8s cubic-bezier(.42,0,.2,1) infinite;
}
body.home .ngh #experience .ngdp-transform__eyebrow i {
animation:ngdp-live-dot 1.3s ease-in-out infinite;
}
body.home .ngh #experience .ngdp-transform__finishart-card--one {
animation:ngdp-card-a 6.8s ease-in-out infinite;
}
body.home .ngh #experience .ngdp-transform__finishart-card--two {
animation:ngdp-card-b 6.8s ease-in-out infinite;
}
body.home .ngh #experience .ngdp-transform__finishart-target {
animation:ngdp-target 6.8s ease-in-out infinite;
}
body.home .ngh #experience .ngdp-transform__steps i:nth-child(1){animation:ngdp-pill-a 6.8s linear infinite}
body.home .ngh #experience .ngdp-transform__steps i:nth-child(2){animation:ngdp-pill-b 6.8s linear infinite}
body.home .ngh #experience .ngdp-transform__steps i:nth-child(3){animation:ngdp-pill-c 6.8s linear infinite}
@keyframes ngdp-reveal {
0%,12% {clip-path:inset(0 100% 0 0)}
47%,74% {clip-path:inset(0 0 0 0)}
96%,100% {clip-path:inset(0 100% 0 0)}
}
@keyframes ngdp-wipe-line {
0%,12% {left:0%;opacity:0}
16% {opacity:1}
47%,74% {left:calc(100% - 3px);opacity:1}
79% {opacity:1}
96%,100% {left:0%;opacity:0}
}
@keyframes ngdp-live-dot {
0%,100% {box-shadow:0 0 0 3px #84c04122}
50% {box-shadow:0 0 0 6px #84c04148,0 0 12px #84c04199}
}
@keyframes ngdp-card-a {
0%,27%{transform:rotate(-8deg) translateY(12px)}
50%,78%{transform:rotate(-8deg) translateY(0)}
100%{transform:rotate(-8deg) translateY(12px)}
}
@keyframes ngdp-card-b {
0%,30%{transform:rotate(7deg) translateY(14px)}
55%,78%{transform:rotate(7deg) translateY(0)}
100%{transform:rotate(7deg) translateY(14px)}
}
@keyframes ngdp-target {
0%,35%,100%{transform:scale(.9);box-shadow:0 0 0 2px #84c04122}
55%,77%{transform:scale(1.1);box-shadow:0 0 0 10px #84c04133}
}
@keyframes ngdp-pill-a {0%,25%,100%{background:#84c041}40%,90%{background:#cbd3c7}}
@keyframes ngdp-pill-b {0%,25%,80%,100%{background:#cbd3c7}42%,68%{background:#84c041}}
@keyframes ngdp-pill-c {0%,58%,100%{background:#cbd3c7}70%,92%{background:#84c041}}
}
@media(max-width:600px) {
body.home .ngh #experience .ngdp-transform {margin-top:18px}
body.home .ngh #experience .ngdp-transform__head{padding:10px 11px}
body.home .ngh #experience .ngdp-transform__eyebrow{font-size:9px}
body.home .ngh #experience .ngdp-transform__note{font-size:8px}
body.home .ngh #experience .ngdp-transform__frame{height:170px}
body.home .ngh #experience .ngdp-transform__layout{height:141px;padding:11px;gap:9px}
body.home .ngh #experience .ngdp-transform__draftart,
body.home .ngh #experience .ngdp-transform__finishart{height:97px}
body.home .ngh #experience .ngdp-transform__finishcopy strong{font-size:clamp(15px,4.5vw,21px)}
body.home .ngh #experience .ngdp-transform__finishtext{font-size:8px}
body.home .ngh #experience .ngdp-transform__finishbutton{font-size:7px;white-space:normal;padding:6px}
body.home .ngh #experience .ngdp-transform__foot{padding:7px 11px}
}
@media(max-width:380px) {
body.home .ngh #experience .ngdp-transform__note{letter-spacing:0}
body.home .ngh #experience .ngdp-transform__frame{height:183px}
body.home .ngh #experience .ngdp-transform__layout{height:154px}
}
@media(prefers-reduced-motion:reduce) {
body.home .ngh #experience .ngdp-transform__finish{clip-path:inset(0 0 0 0)}
body.home .ngh #experience .ngdp-transform__reveal{display:none}
}