.demo-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"pad""head""lede""checks""fhead""form""hands"}.demo-hero-pad{justify-self:center;width:220px;margin-bottom:28px}@media (width>=600px){.demo-hero-grid{grid-template:"head head""lede pad""checks pad"1fr"fhead fhead""form form""hands hands"/minmax(0,1fr) auto;column-gap:24px}.demo-hero-pad{place-self:end;width:220px;margin:24px -32px 0 0}.demo-hero-form-head,.demo-hero-form{justify-self:start;max-width:564px}}@media (width>=768px){.demo-hero-pad{width:270px}.demo-hero-form-head,.demo-hero-form{justify-self:center}}@media (width>=1024px){.demo-hero-grid{--pad-w:224px;grid-template:"head fhead""lede form""checks form""hands form"".form"1fr/minmax(0,1fr) minmax(0,460px);column-gap:48px;position:relative}.demo-hero-pad{width:var(--pad-w);grid-area:fhead;margin:0;position:absolute;bottom:-12px;right:-24px}.demo-hero-form-head{max-width:calc(100% - var(--pad-w) + 24px);place-self:end start}.demo-hero-form{justify-self:stretch;max-width:none}}@media (width>=1280px){.demo-hero-grid{--pad-w:248px;grid-template-columns:minmax(0,1fr) 564px;column-gap:80px}.demo-hero-pad{bottom:-16px}}@media (width>=1440px){.demo-hero-grid{--pad-w:272px}}@media (width>=1536px){.demo-hero-grid{--pad-w:296px}}@media (width<=359px){.demo-hero-form form>div:not([class]){transform-origin:0 0;margin-bottom:-8px;transform:scale(.88)}}@media (width>=1024px) and (height<=820px){.demo-hero-inner{padding-top:40px}.demo-hero-grid{--pad-w:200px}}@media (width>=1280px) and (height<=820px){.demo-hero-grid{--pad-w:224px}}@media (width>=1440px) and (height<=820px){.demo-hero-grid{--pad-w:248px}}@media (width>=1536px) and (height<=820px){.demo-hero-grid{--pad-w:272px}}@media (width<=374px){.demo-hero-title{font-size:13vw}}@media (width>=1024px){.demo-hero-title{font-size:4rem}}@media (width>=1024px) and (width<=1179px){.demo-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}.demo-hero-title{font-size:3.375rem}}@media (width>=1440px){.demo-hero-title{font-size:5.5rem}}.demo-pad-back{transform-origin:50% 100%;--idle:2.9s;--idle-delay:-700ms;--r1:.8deg;--r2:-.5deg}.demo-pad-pose{transform-origin:50% 0;--idle:2.5s;--idle-delay:-1600ms}.demo-pad-paper{--r1:0deg;--r2:0deg}.demo-pad-sheet{opacity:0;transform-origin:0 0;pointer-events:none}.demo-pad-ring,.demo-pad-tick{transform-origin:50%}@media (prefers-reduced-motion:no-preference){:root:not([data-reduce-motion=reduce]) .demo-pad-pose{animation:landing-paper-pose var(--idle) step-end var(--idle-delay) infinite;--r1:-.6deg;--r2:.4deg}:root:not([data-reduce-motion=reduce]) .demo-pad[data-on] .demo-pad-sheet{animation:1.5s step-end both demo-pad-tear-side}:root:not([data-reduce-motion=reduce]) .demo-pad[data-on] .demo-pad-ring{--act-delay:1.25s;--act-dur:.52s}:root:not([data-reduce-motion=reduce]) .demo-pad[data-on] .demo-pad-tick{--act-delay:1.7s;--act-dur:.42s}@media (width>=1024px){:root:not([data-reduce-motion=reduce]) .demo-pad[data-on] .demo-pad-sheet{animation-name:demo-pad-tear-up}}:root:not([data-reduce-motion=reduce]) .demo-step-card{transition:translate .22s cubic-bezier(.3,.7,.2,1),box-shadow .22s cubic-bezier(.3,.7,.2,1)}:root:not([data-reduce-motion=reduce]) .demo-step-card:hover,:root:not([data-reduce-motion=reduce]) .demo-step-card:focus-within{box-shadow:var(--shadow-raised);translate:0 -2px}}@keyframes demo-pad-tear-up{0%{opacity:1;filter:drop-shadow(0 4px 4px #01121029);transform:none}14%{opacity:1;filter:drop-shadow(0 5px 5px #0112102e);transform:rotate(2deg)}28%{opacity:1;filter:drop-shadow(0 7px 7px #01121033);transform:translate(2%)rotate(5deg)}42%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(10%,-12%)rotate(9deg)}56%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(28%,-24%)rotate(13deg)}70%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(56%,-34%)rotate(18deg)}84%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(96%,-44%)rotate(22deg)}to{opacity:0;filter:none;transform:translate(140%,-55%)rotate(26deg)}}@keyframes demo-pad-tear-side{0%{opacity:1;filter:drop-shadow(0 4px 4px #01121029);transform:none}14%{opacity:1;filter:drop-shadow(0 6px 6px #0112102e);transform:rotate(3deg)}28%{opacity:1;filter:drop-shadow(0 8px 8px #01121033);transform:translate(4%,1%)rotate(8deg)}42%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(16%,4%)rotate(14deg)}56%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(38%,9%)rotate(21deg)}70%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(70%,14%)rotate(30deg)}84%{opacity:1;filter:drop-shadow(0 10px 10px #01121038);transform:translate(112%,20%)rotate(40deg)}to{opacity:0;filter:none;transform:translate(160%,26%)rotate(50deg)}}.demo-step-corner{transform-origin:100% 0;--idle:2.8s;--idle-delay:-300ms;--r1:-1.6deg;--r2:.8deg}.demo-closing .closing-corner-left{--idle-delay:-1200ms}.demo-closing .closing-corner-right{--idle-delay:-400ms}
