/* The homepage (DESIGN.md v3 §4b; round-54 h1-homepage-grid). The rules below are the drawing's own,
   in its order; later rules refine earlier ones, as in the drawing. Shared rules (fonts, colours, header,
   footer, the wordmark, labels) are in site.css. The page loads no script: all motion is CSS. */

/* The pictures of the app keep the app's own system font (the iPad shows the app as it is today). */
.ipad,.stage{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.r{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
.m{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* Fig. 1: the animated iPad */
.ipad-wrap{container-type:inline-size;max-width:1040px;margin:clamp(40px,6vw,72px) auto 0}
.ipad{position:relative;padding:1.5cqw;border-radius:4.2cqw;background:#1E1F22;box-shadow:inset 0 0 0 .18cqw #3A3B40,0 4cqw 7cqw -2cqw rgba(39,40,43,.35),0 1cqw 2.4cqw rgba(39,40,43,.12);animation:rise 1.4s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes rise{from{opacity:0;transform:perspective(1800px) rotateX(16deg) translateY(4%) scale(.95)}to{opacity:1;transform:none}}
.screen{position:relative;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;border-radius:2.7cqw;background:var(--desk)}
.screen>*,.abs>*{position:absolute}
.s-sc{font-size:.72cqw;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sp{overflow:hidden;border-radius:2.3cqw;background:#F5F4F1;box-shadow:0 .2cqw .6cqw rgba(39,40,43,.06),0 1.2cqw 3cqw rgba(39,40,43,.08)}
.backbtn{display:flex;align-items:center;gap:.5cqw;padding-left:1cqw;background:var(--paper);border-radius:1.55cqw;font-size:1.1cqw;box-shadow:0 .1cqw .4cqw rgba(39,40,43,.08)}
.backbtn svg,.search svg{width:1.1cqw;height:1.1cqw;display:block}
.seg{display:flex;align-items:center;justify-content:center;font-size:.98cqw;white-space:nowrap}
.search{display:flex;align-items:center;gap:.8cqw;padding-left:.9cqw;background:#EEEDE9;border-radius:1.4cqw;font-size:.95cqw;color:var(--muted);white-space:nowrap}
.chips{display:flex;gap:.5cqw;white-space:nowrap}
.chips span{display:flex;align-items:center;height:2.1cqw;padding:0 .9cqw;border-radius:1.05cqw;background:#EEEDE9;font-size:.85cqw}
.chips span:first-child{background:var(--control);color:#fff}
.prow{position:absolute;left:1.6cqw;width:23.3cqw;height:5.2cqw;border-bottom:1px solid var(--rule);border-radius:.6cqw}
.pname{position:absolute;left:.6cqw;top:0;bottom:0;width:10.8cqw;display:flex;flex-direction:column;justify-content:center;gap:.25cqw;font-size:1cqw;line-height:1.22}
.pmeta{display:flex;gap:.5cqw;font-size:.72cqw;color:var(--muted);white-space:nowrap;line-height:1.2}
.pmeta .m{font-size:.68cqw}
.pprice{position:absolute;right:3.3cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:.15cqw;font-size:1cqw;font-weight:600;font-variant-numeric:tabular-nums}
.plist{font-size:.72cqw;font-weight:400;color:var(--muted);white-space:nowrap}
.pmark{position:absolute;right:.6cqw;top:1.6cqw;width:2cqw;height:2cqw;border-radius:50%;border:.16cqw solid var(--control);display:flex;align-items:center;justify-content:center;color:var(--control)}
.pmark svg{width:1cqw;height:1cqw;display:block}
.pstep{position:absolute;right:.5cqw;top:1.4cqw;width:6.2cqw;height:2.4cqw;border-radius:1.2cqw;background:var(--control);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 .8cqw;font-size:1cqw;font-weight:600}
.sv{display:block;height:2.4cqw;line-height:2.4cqw;text-align:center;overflow:hidden}
.sv>span{display:block}
.sv>span>span{display:block;height:2.4cqw}
.sheet{background:var(--paper);border-radius:.5cqw;box-shadow:0 .2cqw .5cqw rgba(39,40,43,.07),0 1.4cqw 3.4cqw rgba(39,40,43,.1)}
.sheet-b{background:#F4F3EF;border-radius:.5cqw;box-shadow:0 .1cqw .3cqw rgba(39,40,43,.1)}
.pl{left:32cqw;width:42.4cqw;height:4.17cqw;border-bottom:1px solid var(--rule)}
.pl .tint{position:absolute;top:0;bottom:0;left:-.6cqw;right:-.6cqw;border-radius:.4cqw}
.pl .nm{position:absolute;left:0;top:.75cqw;font-size:1.08cqw;white-space:nowrap}
.pl .mt{position:absolute;left:0;top:2.45cqw;font-size:.78cqw;color:var(--muted);white-space:nowrap}
.pl .c{position:absolute;top:0;height:100%;border-left:1px solid var(--rule)}
.pl .v{position:absolute;right:.8cqw;top:.75cqw;height:1.6cqw;line-height:1.6cqw;overflow:hidden;font-size:1.08cqw;text-align:right;font-variant-numeric:tabular-nums}
.pl .v>span{display:block}
.pl .v>span>span{display:block;height:1.6cqw}
.tv{height:3.2cqw;line-height:3.2cqw;text-align:right;font-size:2.3cqw;font-weight:650}
.note{width:23.6cqw;height:4cqw}
.note .ld{position:absolute;left:0;top:.42cqw;width:5.2cqw;border-top:.1cqw dashed #8C8983}
.note .s-sc{position:absolute;left:5.8cqw;top:0}
.tbtn{display:flex;align-items:center;justify-content:center;gap:.5cqw;border-radius:.6cqw;font-size:1.1cqw;font-weight:500;white-space:nowrap}
.tbtn svg{width:1.1cqw;height:1.1cqw;display:block}
.tap{left:0;top:0;width:2.6cqw;height:2.6cqw;border-radius:50%;background:rgba(39,40,43,.16);box-shadow:0 0 0 .12cqw rgba(39,40,43,.24);opacity:0;pointer-events:none}
.h{animation-duration:13s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-delay:1.6s}
.kA0{opacity:0;animation-name:hA0}.kA1{animation-name:hA1}.kHB{transform:translateY(10.4cqw);animation-name:hHB}
.mCol{animation-name:hK1}.mCup{animation-name:hK2,mvCup}.mOat{animation-name:hK3,mvOat}.kVan{transform:translateY(2.6cqw);animation-name:mvVan}
.kM1{opacity:0;animation-name:hM1}.kM2{opacity:0;animation-name:hM2}.kM3{opacity:0;animation-name:hM3}
.kS1{animation-name:hS1}.kS2{animation-name:hS2}.kS3{animation-name:hS3}
.kP1{transform:translateX(-4.2cqw);animation-name:hP1}.kP2{transform:translateX(-4.2cqw);animation-name:hP2}.kP3{transform:translateX(-4.2cqw);animation-name:hP3}
.kV1{transform:translateY(-7.2cqw);animation-name:hV1}.kV2{transform:translateY(-2.4cqw);animation-name:hV2}.kV3{transform:translateY(-4.8cqw);animation-name:hV3}
.kEmp{opacity:0;animation-name:hEmp}
.kL1{animation-name:hL1}.kL2{animation-name:hL2}.kL3{animation-name:hL3}
.kT1{animation-name:hT1}.kT2{animation-name:hT2}.kT3{animation-name:hT3}
.kQ1{transform:translateY(-4.8cqw);animation-name:hQ1}.kQ2{transform:translateY(-1.6cqw);animation-name:hQ2}.kQ3{transform:translateY(-3.2cqw);animation-name:hQ3}
.kAL{transform:translateY(12.51cqw);animation-name:hAL}
.kTot{transform:translateY(-28.8cqw);animation-name:hTot}.kTotW{animation-name:hTotW}
.kJA{opacity:0;animation-name:hJA}.kCN{animation-name:hCN}
.kNw{opacity:0;animation-name:hNw}.kInv{animation-name:hInv}
.kDr{opacity:0;animation-name:hDr}.kIs{animation-name:hIs}.kTB{opacity:0;animation-name:hDr}.kIB{opacity:0;animation-name:hIB}.kPost{animation-name:hPost}
.kTap{animation-name:hTap;animation-timing-function:ease-out}
@keyframes hA0{0%,6.4%{opacity:1}7.2%,92%{opacity:0}94%,100%{opacity:1}}
@keyframes hA1{0%,6.4%{opacity:0}7.2%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes hHB{0%,6.4%{opacity:0;transform:none}7.2%,20.4%{opacity:1;transform:none}21.2%,29.4%{opacity:1;transform:translateY(5.2cqw)}30.2%,92%{opacity:1;transform:translateY(10.4cqw)}94%,100%{opacity:0;transform:translateY(10.4cqw)}}
@keyframes mvCup{0%,6.4%{transform:none}7.2%,20.4%{transform:translateY(2.6cqw)}21.2%,100%{transform:none}}
@keyframes mvOat{0%,6.4%{transform:none}7.2%,29.4%{transform:translateY(2.6cqw)}30.2%,100%{transform:none}}
@keyframes mvVan{0%,6.4%{transform:none}7.2%,92%{transform:translateY(2.6cqw)}94%,100%{transform:none}}
@keyframes hK1{0%,5.9%{background-color:rgba(231,229,224,0)}6.3%,8.5%{background-color:#E7E5E0}11%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hK2{0%,19.9%{background-color:rgba(231,229,224,0)}20.3%,22.5%{background-color:#E7E5E0}25%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hK3{0%,28.9%{background-color:rgba(231,229,224,0)}29.3%,31.5%{background-color:#E7E5E0}34%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hM1{0%,5.8%{opacity:1;transform:none}6.2%{opacity:1;transform:scale(.8)}6.6%,92%{opacity:0;transform:none}94%,100%{opacity:1;transform:none}}
@keyframes hM2{0%,19.8%{opacity:1;transform:none}20.2%{opacity:1;transform:scale(.8)}20.6%,92%{opacity:0;transform:none}94%,100%{opacity:1;transform:none}}
@keyframes hM3{0%,28.8%{opacity:1;transform:none}29.2%{opacity:1;transform:scale(.8)}29.6%,92%{opacity:0;transform:none}94%,100%{opacity:1;transform:none}}
@keyframes hS1{0%,6.4%{opacity:0}6.9%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes hS2{0%,20.4%{opacity:0}20.9%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes hS3{0%,29.4%{opacity:0}29.9%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes hP1{0%,6.4%{transform:none}7.2%,92%{transform:translateX(-4.2cqw)}94%,100%{transform:none}}
@keyframes hP2{0%,20.4%{transform:none}21.2%,92%{transform:translateX(-4.2cqw)}94%,100%{transform:none}}
@keyframes hP3{0%,29.4%{transform:none}30.2%,92%{transform:translateX(-4.2cqw)}94%,100%{transform:none}}
@keyframes hV1{0%,10.4%{transform:none}10.9%,12.9%{transform:translateY(-2.4cqw)}13.4%,15.4%{transform:translateY(-4.8cqw)}15.9%,100%{transform:translateY(-7.2cqw)}}
@keyframes hV2{0%,24.9%{transform:none}25.4%,100%{transform:translateY(-2.4cqw)}}
@keyframes hV3{0%,33.9%{transform:none}34.4%,36.4%{transform:translateY(-2.4cqw)}36.9%,100%{transform:translateY(-4.8cqw)}}
@keyframes hEmp{0%,6.2%{opacity:1}6.8%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes hL1{0%,6.4%{opacity:0;transform:translateY(-.5cqw)}7.4%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hL2{0%,20.4%{opacity:0;transform:translateY(-.5cqw)}21.4%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hL3{0%,29.4%{opacity:0;transform:translateY(-.5cqw)}30.4%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hT1{0%,7.4%{background-color:#E7E5E0}14%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hT2{0%,21.4%{background-color:#E7E5E0}27%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hT3{0%,30.4%{background-color:#E7E5E0}37.5%,100%{background-color:rgba(231,229,224,0)}}
@keyframes hQ1{0%,10.4%{transform:none}10.9%,12.9%{transform:translateY(-1.6cqw)}13.4%,15.4%{transform:translateY(-3.2cqw)}15.9%,100%{transform:translateY(-4.8cqw)}}
@keyframes hQ2{0%,24.9%{transform:none}25.4%,100%{transform:translateY(-1.6cqw)}}
@keyframes hQ3{0%,33.9%{transform:none}34.4%,36.4%{transform:translateY(-1.6cqw)}36.9%,100%{transform:translateY(-3.2cqw)}}
@keyframes hAL{0%,6.4%{opacity:0;transform:translateY(4.17cqw)}7.4%,20.4%{opacity:1;transform:translateY(4.17cqw)}21.4%,29.4%{opacity:1;transform:translateY(8.34cqw)}30.4%,88%{opacity:1;transform:translateY(12.51cqw)}91%,100%{opacity:0;transform:translateY(12.51cqw)}}
@keyframes hTot{0%,6.6%{transform:none}7.1%,10.4%{transform:translateY(-3.2cqw)}10.9%,12.9%{transform:translateY(-6.4cqw)}13.4%,15.4%{transform:translateY(-9.6cqw)}15.9%,20.4%{transform:translateY(-12.8cqw)}20.9%,24.9%{transform:translateY(-16cqw)}25.4%,29.4%{transform:translateY(-19.2cqw)}29.9%,33.9%{transform:translateY(-22.4cqw)}34.4%,36.4%{transform:translateY(-25.6cqw)}36.9%,90.9%{transform:translateY(-28.8cqw)}91%,100%{transform:none}}
@keyframes hTotW{0%,88%{opacity:1}90%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes hJA{0%,6.6%{opacity:0;transform:none}7.6%,20.3%{opacity:1;transform:none}20.5%,20.9%{opacity:0;transform:translateY(4.17cqw)}21.6%,29.3%{opacity:1;transform:translateY(4.17cqw)}29.5%,29.9%{opacity:0;transform:translateY(8.34cqw)}30.6%,43.8%{opacity:1;transform:translateY(8.34cqw)}44.8%,100%{opacity:0;transform:translateY(8.34cqw)}}
@keyframes hCN{0%,20.6%{opacity:0;transform:translateY(1.7cqw)}21.6%,29.4%{opacity:1;transform:translateY(1.7cqw)}30.4%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hNw{0%,44.6%{opacity:1}45.4%,90%{opacity:0}93%,100%{opacity:1}}
@keyframes hInv{0%,45.2%{opacity:0;transform:scale(1.5)}46.4%{opacity:1;transform:scale(.95)}47.4%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hDr{0%,44.6%{opacity:1}45.6%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes hIs{0%,45.4%{opacity:0}46.4%,88%{opacity:1}91%,100%{opacity:0}}
@keyframes hIB{0%,43.2%{opacity:1;transform:none}43.8%{opacity:1;transform:scale(.94)}44.4%{opacity:1;transform:none}45.6%,92%{opacity:0;transform:none}95%,100%{opacity:1;transform:none}}
@keyframes hPost{0%,45.6%{opacity:0;transform:translateY(-.4cqw)}46.8%,88%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes hTap{0%,5.6%{opacity:0;transform:translate(21.9cqw,26.3cqw) scale(.6)}6%{opacity:1;transform:translate(21.9cqw,26.3cqw) scale(1)}6.8%{opacity:0;transform:translate(21.9cqw,26.3cqw) scale(1.25)}6.9%,9.6%{opacity:0;transform:translate(22cqw,26.3cqw) scale(.6)}10%{opacity:1;transform:translate(22cqw,26.3cqw) scale(1)}10.8%{opacity:0;transform:translate(22cqw,26.3cqw) scale(1.25)}10.9%,12.1%{opacity:0;transform:translate(22cqw,26.3cqw) scale(.6)}12.5%{opacity:1;transform:translate(22cqw,26.3cqw) scale(1)}13.3%{opacity:0;transform:translate(22cqw,26.3cqw) scale(1.25)}13.4%,14.6%{opacity:0;transform:translate(22cqw,26.3cqw) scale(.6)}15%{opacity:1;transform:translate(22cqw,26.3cqw) scale(1)}15.8%{opacity:0;transform:translate(22cqw,26.3cqw) scale(1.25)}15.9%,19.6%{opacity:0;transform:translate(21.9cqw,34.1cqw) scale(.6)}20%{opacity:1;transform:translate(21.9cqw,34.1cqw) scale(1)}20.8%{opacity:0;transform:translate(21.9cqw,34.1cqw) scale(1.25)}20.9%,24.1%{opacity:0;transform:translate(22cqw,31.5cqw) scale(.6)}24.5%{opacity:1;transform:translate(22cqw,31.5cqw) scale(1)}25.3%{opacity:0;transform:translate(22cqw,31.5cqw) scale(1.25)}25.4%,28.6%{opacity:0;transform:translate(21.9cqw,39.3cqw) scale(.6)}29%{opacity:1;transform:translate(21.9cqw,39.3cqw) scale(1)}29.8%{opacity:0;transform:translate(21.9cqw,39.3cqw) scale(1.25)}29.9%,33.1%{opacity:0;transform:translate(22cqw,36.7cqw) scale(.6)}33.5%{opacity:1;transform:translate(22cqw,36.7cqw) scale(1)}34.3%{opacity:0;transform:translate(22cqw,36.7cqw) scale(1.25)}34.4%,35.6%{opacity:0;transform:translate(22cqw,36.7cqw) scale(.6)}36%{opacity:1;transform:translate(22cqw,36.7cqw) scale(1)}36.8%{opacity:0;transform:translate(22cqw,36.7cqw) scale(1.25)}36.9%,43.1%{opacity:0;transform:translate(91.2cqw,2.75cqw) scale(.6)}43.5%{opacity:1;transform:translate(91.2cqw,2.75cqw) scale(1)}44.3%{opacity:0;transform:translate(91.2cqw,2.75cqw) scale(1.25)}44.4%,100%{opacity:0;transform:translate(91.2cqw,2.75cqw) scale(.6)}}

/* How it works */
.how{padding:72px 0 104px;border-top:1px solid var(--rule)}
.how-head{display:flex;flex-wrap:wrap;gap:20px 64px;align-items:flex-end;justify-content:space-between;margin-bottom:44px}
.how h2{margin:0;font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:700;max-width:15ch;text-wrap:balance}
.how-lede{margin:0;max-width:44ch;color:var(--muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.steps{display:flex;flex-wrap:wrap;gap:56px 48px}
.step{flex:1 1 420px;min-width:0}
.frame{position:relative}
.crop{position:absolute;width:0;height:0}
.crop::before,.crop::after{content:"";position:absolute;background:var(--formline)}
.crop::before{width:9px;height:1px}
.crop::after{width:1px;height:9px}
.tl{top:0;left:0}.tl::before{top:0;right:5px}.tl::after{left:0;bottom:5px}
.tr{top:0;right:0}.tr::before{top:0;left:5px}.tr::after{right:0;bottom:5px}
.bl{bottom:0;left:0}.bl::before{bottom:0;right:5px}.bl::after{left:0;top:5px}
.br{bottom:0;right:0}.br::before{bottom:0;left:5px}.br::after{right:0;top:5px}
.num{margin:24px 0 0;font-size:13px;color:var(--muted)}
.step h3{margin:6px 0 0;font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:650}
.body{margin:8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6;text-wrap:pretty}

/* The four step pictures */
.stage{position:relative;aspect-ratio:1.6;container-type:inline-size;background:var(--desk);border-radius:14px;overflow:hidden}
.stage>*{position:absolute}
.paper{background:var(--paper);border-radius:1.6cqw;box-shadow:0 .3cqw .6cqw rgba(39,40,43,.06),0 1.6cqw 4.4cqw rgba(39,40,43,.08)}
.lab{font-size:2.5cqw;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ck{width:3.2cqw;height:3.2cqw;display:block;flex:none}
.btn{display:flex;align-items:center;justify-content:center;gap:1.6cqw;background:var(--control);color:#fff;border-radius:2cqw;font-size:2.8cqw;font-weight:600;white-space:nowrap}
.done{display:flex;align-items:center;justify-content:center;gap:1.4cqw;font-size:2.8cqw;font-weight:500;white-space:nowrap}
.win{overflow:hidden}
.win>div>div{white-space:nowrap}
.csv{display:flex;align-items:center;justify-content:space-between;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:2.25cqw;white-space:nowrap}
.row{display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font-size:3cqw;white-space:nowrap}
.row .r{color:var(--muted)}
.sel{background:var(--sel);border-radius:1.2cqw}
.line{display:flex;align-items:center;gap:1.8cqw;padding:0 2cqw;font-size:2.8cqw;border-radius:1cqw;white-space:nowrap}
.line .q{color:var(--muted);min-width:4cqw}
.line .amt{margin-left:auto}

.a{animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-delay:var(--dl,0s)}
.d2{--dl:.5s}.d3{--dl:1s}
@media (prefers-reduced-motion:reduce){.cp .a,.cp .h,.cp .ipad{animation:none !important}}

.scan{opacity:0;animation-name:c1scan}
.c1n{transform:translateY(-28cqw);animation-name:c1count}
.c1k{animation-name:c1known}
.c1b{opacity:0;animation-name:c1btn}
.c1d{animation-name:c1done}
@keyframes c1scan{0%,3.9%{opacity:0;transform:none}4%,10%{opacity:1;transform:none}11%,17%{opacity:1;transform:translateY(6cqw)}18%,24%{opacity:1;transform:translateY(12cqw)}25%,30%{opacity:1;transform:translateY(18cqw)}33%,100%{opacity:0;transform:translateY(18cqw)}}
@keyframes c1count{0%,9%{transform:none}10%,16%{transform:translateY(-7cqw)}17%,23%{transform:translateY(-14cqw)}24%,30%{transform:translateY(-21cqw)}31%,95.9%{transform:translateY(-28cqw)}96%,100%{transform:none}}
@keyframes c1known{0%,33%{opacity:0;transform:translateY(1.2cqw)}36%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes c1btn{0%,33%{opacity:0;transform:translateY(1.2cqw)}36%,48%{opacity:1;transform:none}49.5%{opacity:1;transform:scale(.95)}51%{opacity:1;transform:none}53%,100%{opacity:0;transform:none}}
@keyframes c1done{0%,52%{opacity:0;transform:translateY(1.2cqw)}55%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}

.c2s{transform:translateY(14.4cqw);animation-name:c2sel}
.c2p{transform:translateY(-13.2cqw);animation-name:c2price}
.c2n{transform:translateY(-8.8cqw);animation-name:c2note}
@keyframes c2sel{0%,28%{transform:none}31%,61%{transform:translateY(7.2cqw)}64%,94%{transform:translateY(14.4cqw)}97%,100%{transform:none}}
@keyframes c2price{0%,28%{transform:none}31%,61%{transform:translateY(-6.6cqw)}64%,94%{transform:translateY(-13.2cqw)}97%,99.9%{transform:translateY(-19.8cqw)}100%{transform:none}}
@keyframes c2note{0%,28%{transform:none}31%,61%{transform:translateY(-4.4cqw)}64%,94%{transform:translateY(-8.8cqw)}97%,99.9%{transform:translateY(-13.2cqw)}100%{transform:none}}

.l1{animation-name:c3l1}.l2{animation-name:c3l2}.l3{animation-name:c3l3}
.h1t{animation-name:c3h1}.h2t{animation-name:c3h2}.h3t{animation-name:c3h3}
.c3t{transform:translateY(-16.8cqw);animation-name:c3tot}
.fadew{animation-name:resetfade}
.c3b{opacity:0;animation-name:c3btn}
.c3d{opacity:0;animation-name:c3draft}
.c3i{transform-origin:100% 50%;animation-name:c3inv}
.c3h{animation-name:c3hist}
@keyframes resetfade{0%,92%{opacity:1}95%,97%{opacity:0}100%{opacity:1}}
@keyframes c3l1{0%,8%{opacity:0;transform:translateY(1.2cqw)}10%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes c3l2{0%,20%{opacity:0;transform:translateY(1.2cqw)}22%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes c3l3{0%,32%{opacity:0;transform:translateY(1.2cqw)}34%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes c3h1{0%,9%{background-color:#E7E5E0}20%,100%{background-color:rgba(231,229,224,0)}}
@keyframes c3h2{0%,21%{background-color:#E7E5E0}32%,100%{background-color:rgba(231,229,224,0)}}
@keyframes c3h3{0%,33%{background-color:#E7E5E0}44%,100%{background-color:rgba(231,229,224,0)}}
@keyframes c3tot{0%,9%{transform:none}11%,21%{transform:translateY(-5.6cqw)}23%,33%{transform:translateY(-11.2cqw)}35%,95.9%{transform:translateY(-16.8cqw)}96%,100%{transform:none}}
@keyframes c3btn{0%,45%{opacity:1;transform:none}46.5%{opacity:1;transform:scale(.95)}48%{opacity:1;transform:none}50%,95%{opacity:0;transform:none}98%,100%{opacity:1;transform:none}}
@keyframes c3draft{0%,48%{opacity:1}50%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes c3inv{0%,49.9%{opacity:0;transform:scale(1.6)}52%{opacity:1;transform:scale(.94)}54%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes c3hist{0%,58%{opacity:0;transform:translateY(1.2cqw)}61%,91%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}

.d4{--dl:1.5s}
.pill{display:inline-flex;align-items:center;height:3.6cqw;padding:0 1.4cqw;border-radius:2cqw;background:#F5E4E1;color:#6E3732;font-size:2.4cqw;font-weight:500;white-space:nowrap}
.urow{position:absolute;left:0;width:88cqw;height:10.8cqw}
.ufg{position:absolute;inset:0;background:var(--paper)}
.uname{position:absolute;left:4cqw;top:2cqw;font-size:3cqw;font-weight:500;white-space:nowrap}
.ustat{position:absolute;left:4cqw;top:6.2cqw;font-size:2.5cqw;color:var(--muted);white-space:nowrap}
.uamt{position:absolute;right:4cqw;top:3.4cqw;font-size:3.3cqw;font-weight:600}
.act{position:absolute;top:0;height:10.8cqw;width:12cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;color:#fff;font-size:2.3cqw;font-weight:600}
.act svg{width:3.2cqw;height:3.2cqw;display:block}
.c4fg{transform:translateX(-24cqw);animation-name:c4fg}
.c4pay{animation-name:c4pay}
.c4row{animation-name:c4row}
.c4grp{animation-name:c4grp}
.c4sum{animation-name:c4sum}
.c4cnt{animation-name:c4cnt}
@keyframes c4fg{0%,11%{transform:none}15%,92.9%{transform:translateX(-24cqw)}93%,100%{transform:none}}
@keyframes c4pay{0%,23%{transform:none}24.5%{transform:scale(.9)}26%,100%{transform:none}}
@keyframes c4row{0%,27%{opacity:1}30%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes c4grp{0%,29%{transform:none}32.5%,92%{transform:translateY(-10.8cqw)}95.5%,100%{transform:none}}
@keyframes c4sum{0%,29%{transform:none}31%,93%{transform:translateY(-4cqw)}95%,100%{transform:none}}
@keyframes c4cnt{0%,29%{transform:none}31%,93%{transform:translateY(-3.6cqw)}95%,100%{transform:none}}

/* Direction A: grid */
.giant .wms .drop{transform-box:fill-box;font-size:2048px}
.hA{position:relative;overflow:hidden}
.hA .guides{position:absolute;inset:0;pointer-events:none}
.hA .guides .wrap,.hA .guides .g12{height:100%}
.hA .guides .g12 div{background:rgba(39,40,43,.035)}
.hA-top{position:relative;padding-top:34px;row-gap:28px;align-items:start}
.hA h1{grid-column:1 / span 6;margin:0;font-size:clamp(38px,4.3vw,54px);line-height:1.02;font-weight:650;letter-spacing:-.038em;text-wrap:balance}
.hA-lede{grid-column:8 / span 3;margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.hA-idx{grid-column:11 / span 2;margin-top:8px}
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.idx li{border-bottom:1px solid var(--edge)}
.idx a{display:flex;gap:14px;padding:10px 0;font-size:14px;color:var(--text);text-decoration:none}
.idx span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);padding-top:2px}
.soon{margin:16px 0 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.soon b{width:8px;height:8px;border-radius:50%;background:var(--serial)}
.giant{position:relative;display:block;margin:clamp(40px,8vw,110px) 0 .04em -.035em;font-size:min(23.4vw,300px)}
.giant .wms{display:block}
.hA h1,.hA-lede,.hA-idx{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.hA-lede{animation-delay:.12s}.hA-idx{animation-delay:.22s}
.giant{animation:giantUp 1.1s cubic-bezier(.2,.75,.15,1) .2s both}
.drop{display:inline-block;transform-origin:50% 85%;animation:dropIn .65s cubic-bezier(.3,1.6,.5,1) 1.05s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes giantUp{from{transform:translateY(1.15em)}to{transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-1em) scale(.6)}to{opacity:1;transform:none}}
.closing .drop{animation:none}
@supports (animation-timeline:view()){.fig .ipad{animation:rise 1ms cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 40%}.closing h2{view-timeline:--closing block}.closing .drop{animation:dropIn 1ms cubic-bezier(.3,1.6,.5,1) both;animation-timeline:--closing;animation-range:entry 25% entry 100%}}
.figsec{padding:clamp(48px,7vw,96px) 0 clamp(48px,6vw,80px);border-top:2px solid var(--text)}
.fig{margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.fig .ipad-wrap{grid-column:1 / span 10;max-width:none;margin:0}
.fig-cap{grid-column:11 / span 2;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--text);font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.fig-cap .mono{color:var(--text)}
.how{border-top:2px solid var(--text)}
.how-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:16px;align-items:end}
.how-head > div{grid-column:1 / span 7}
.how-lede{grid-column:9 / span 4;max-width:none}
.how h2{max-width:none;font-size:clamp(34px,4.6vw,58px);letter-spacing:-.04em;font-weight:650}
.steps{display:block}
.step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:36px 0;border-top:1px solid var(--text);align-items:start}
.step:last-child{border-bottom:1px solid var(--text)}
.step .frame{grid-column:7 / span 6;grid-row:1 / span 3}
.step .num{grid-column:1 / span 1;grid-row:1;margin:6px 0 0;font-family:var(--mono);letter-spacing:.06em}
.step h3{grid-column:2 / span 4;grid-row:1;margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.03em;font-weight:650;scroll-margin-top:24px;text-wrap:balance}
.step h3::after{content:".";color:var(--serial)}
.step .body{grid-column:2 / span 4;grid-row:2;margin:14px 0 0;font-size:16px}
.closing{padding:clamp(64px,9vw,128px) 0 clamp(48px,7vw,96px)}
.closing-in{align-items:end;row-gap:20px}
.closing h2{grid-column:1 / span 9;margin:0;font-size:min(15vw,168px);line-height:.92;font-weight:760;letter-spacing:-.058em}
.closing p{grid-column:10 / span 3;margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cp .drop,.cp .giant,.cp .hA h1,.cp .hA-lede,.cp .hA-idx{animation:none !important}}
@media (max-width:860px){
.hA h1,.hA-lede,.hA-idx,.how-head > div,.how-lede,.closing h2,.closing p,.fig .ipad-wrap,.fig-cap{grid-column:1 / -1}
.fig-cap{margin-top:20px;max-width:46ch}
.hA-idx{max-width:320px}
.step{row-gap:0}
.step .frame,.step .num,.step h3,.step .body{grid-column:1 / -1;grid-row:auto}
.step .num{order:1;margin:0 0 8px}.step h3{order:2}.step .body{order:3}.step .frame{order:4;margin-top:24px}
}

/* Positions inside the app pictures: one class for each of the drawing's inline styles, which the
   site's CSP (style-src 'self') does not allow. */
/* The iPad (Fig. 1) */
.cp .i1{left:.7cqw;top:.7cqw;width:25.2cqw;height:73.6cqw}
.cp .i2{position:absolute;left:-.7cqw;top:-.7cqw;width:100cqw;height:75cqw}
.cp .i3{left:1.8cqw;top:2.5cqw;width:8.6cqw;height:3.1cqw}
.cp .i4{left:2.1cqw;top:6.9cqw;width:22.4cqw;height:2.8cqw;background:#EEEDE9;border-radius:1.4cqw}
.cp .i5{left:2.3cqw;top:7.1cqw;width:11cqw;height:2.4cqw;background:#FDFDFB;border-radius:1.2cqw;box-shadow:0 .1cqw .3cqw rgba(39,40,43,.1)}
.cp .i6{left:2.3cqw;top:7.1cqw;width:11cqw;height:2.4cqw;font-weight:600}
.cp .i7{left:13.3cqw;top:7.1cqw;width:11cqw;height:2.4cqw;color:#66625C}
.cp .i8{left:2.2cqw;top:11.1cqw;font-size:1cqw;font-weight:600;white-space:nowrap}
.cp .i9{left:2.2cqw;top:12.6cqw;width:22.4cqw;font-size:.75cqw;line-height:1.35;color:#66625C}
.cp .i10{left:2.1cqw;top:15.5cqw;width:22.4cqw;height:2.8cqw}
.cp .i11{left:2.1cqw;top:19.1cqw}
.cp .i12{left:2.2cqw;top:23.3cqw}
.cp .i13{left:2.2cqw;top:31cqw}
.cp .i14{top:25cqw}
.cp .i15{top:30.2cqw}
.cp .i16{top:35.4cqw}
.cp .i17{top:40.6cqw}
.cp .i18{left:0;top:0;width:100cqw;height:75cqw}
.cp .i19{left:2.2cqw;top:46.6cqw}
.cp .i20{top:48.4cqw}
.cp .i21{top:53.6cqw}
.cp .i22{top:58.8cqw}
.cp .i23{top:64cqw}
.cp .i24{top:69.2cqw}
.cp .i25{left:40cqw;top:3.4cqw;width:20cqw;text-align:center;font-size:.95cqw;color:#66625C}
.cp .i26{left:76.4cqw;top:2.6cqw;width:6.6cqw;height:2.9cqw}
.cp .i27{left:83.4cqw;top:2.75cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#FDFDFB}
.cp .i28{left:86.8cqw;top:2.6cqw;width:11.4cqw;height:2.9cqw;background:#2A2B2F;color:#fff;font-weight:600}
.cp .i29{left:78.2cqw;top:2.6cqw;width:9.4cqw;height:2.9cqw;background:#FDFDFB;box-shadow:inset 0 0 0 .1cqw #8A8781}
.cp .i30{left:88.4cqw;top:2.6cqw;width:9.8cqw;height:2.9cqw;background:#FDFDFB;box-shadow:inset 0 0 0 .1cqw #8A8781}
.cp .i31{left:28.6cqw;top:7.8cqw;width:50.6cqw;height:66.3cqw}
.cp .i32{left:28.25cqw;top:7.45cqw;width:50.6cqw;height:66.3cqw}
.cp .i33{left:27.9cqw;top:7.1cqw;width:50.6cqw;height:66.3cqw}
.cp .i34{left:32cqw;top:11.3cqw;font-size:1.3cqw;font-weight:650;white-space:nowrap}
.cp .i35{left:32cqw;top:13.3cqw;font-size:.88cqw;line-height:1.5;color:#66625C;white-space:nowrap}
.cp .i36{left:54.4cqw;top:11.6cqw;width:20cqw;text-align:right}
.cp .i37{left:50.4cqw;top:13.1cqw;width:24cqw;text-align:right;font-size:1cqw;color:#66625C}
.cp .i38{left:50.4cqw;top:12.75cqw;width:24cqw;text-align:right;font-size:1.5cqw;font-weight:600;color:#A63D2A;transform-origin:100% 50%}
.cp .i39{left:32cqw;top:18.8cqw}
.cp .i40{left:32cqw;top:20.1cqw;font-size:1.55cqw;font-weight:600;white-space:nowrap}
.cp .i41{left:32cqw;top:22.5cqw;font-size:.92cqw;line-height:1.5;white-space:nowrap}
.cp .i42{left:58cqw;top:20.1cqw;width:6.6cqw;text-align:right}
.cp .i43{left:58cqw;top:22cqw;width:6.6cqw;text-align:right}
.cp .i44{left:58cqw;top:23.9cqw;width:6.6cqw;text-align:right}
.cp .i45{left:65.6cqw;top:19.75cqw;width:8.8cqw;text-align:right;font-size:1.05cqw}
.cp .i46{left:65.6cqw;top:21.65cqw;width:8.8cqw;text-align:right;font-size:1.05cqw}
.cp .i47{left:65.6cqw;top:23.55cqw;width:8.8cqw;text-align:right;font-size:1.05cqw}
.cp .i48{left:65.9cqw;top:21.3cqw;width:8.5cqw;border-top:1px solid #E3DFD7}
.cp .i49{left:65.9cqw;top:23.2cqw;width:8.5cqw;border-top:1px solid #E3DFD7}
.cp .i50{left:65.9cqw;top:25.1cqw;width:8.5cqw;border-top:1px solid #E3DFD7}
.cp .i51{left:32cqw;top:27.3cqw}
.cp .i52{left:54.2cqw;top:27.3cqw;width:3.7cqw;text-align:right}
.cp .i53{left:58.7cqw;top:27.3cqw;width:6.7cqw;text-align:right}
.cp .i54{left:66.25cqw;top:27.3cqw;width:8.15cqw;text-align:right}
.cp .i55{left:32cqw;top:28.85cqw;width:42.4cqw;border-top:1px solid #8C8983}
.cp .i56{left:32cqw;top:30.3cqw;width:42.4cqw;font-size:1cqw;color:#66625C}
.cp .i57{top:28.9cqw}
.cp .i58{left:22.2cqw;width:4.5cqw}
.cp .i59{left:26.7cqw;width:7.55cqw}
.cp .i60{left:34.25cqw;width:8.15cqw}
.cp .i61{top:33.07cqw}
.cp .i62{top:37.24cqw}
.cp .i63{left:32cqw;top:29.2cqw;width:42.4cqw;height:2.6cqw;display:flex;align-items:center;gap:.6cqw;font-size:1.05cqw;border-bottom:1px solid #E3DFD7}
.cp .i64{width:1cqw;height:1cqw}
.cp .i65{left:52.6cqw;top:50.4cqw;width:21.8cqw;border-top:.15cqw solid #8C8983}
.cp .i66{left:52.6cqw;top:52.8cqw}
.cp .i67{left:60cqw;top:51.6cqw;width:14.4cqw;height:3.2cqw;overflow:hidden}
.cp .i68{left:32cqw;top:68.4cqw;width:42.4cqw;border-top:1px solid #E3DFD7}
.cp .i69{left:32cqw;top:69.3cqw;font-size:.82cqw;color:#66625C}
.cp .i70{left:52.4cqw;top:69.3cqw;width:22cqw;text-align:right;font-size:.82cqw;color:#66625C}
.cp .i71{left:80.5cqw;top:7.7cqw;width:17.7cqw;height:10cqw;background:#F5E4E1;border-radius:.7cqw;border-top:.12cqw dotted rgba(110,55,50,.5)}
.cp .i72{left:81.6cqw;top:8.9cqw;color:#6E3732}
.cp .i73{left:81.6cqw;top:10.4cqw;width:15.6cqw;font-size:.98cqw;line-height:1.42;color:#6E3732}
.cp .i74{left:74.6cqw;top:29.5cqw}
.cp .i75{position:absolute;left:12.6cqw;top:-.2cqw;font-size:.95cqw;text-decoration:underline}
.cp .i76{left:74.6cqw;top:33.67cqw}
.cp .i77{position:absolute;left:5.8cqw;top:1.3cqw;width:17.6cqw;font-size:.95cqw;line-height:1.38}
/* Step 01's picture */
.cp .p1-1{left:6cqw;top:7cqw;width:43cqw;height:50cqw}
.cp .p1-2{left:9.5cqw;top:10.4cqw;font-size:2.4cqw;color:#66625C}
.cp .p1-3{left:9.5cqw;top:16cqw;width:36cqw;height:4cqw;font-size:2.3cqw;color:#66625C}
.cp .p1-4{left:9.5cqw;top:20.6cqw;width:36cqw;border-top:1px solid #E3DFD7}
.cp .p1-5{left:7.5cqw;top:21.4cqw;width:40cqw;height:6cqw}
.cp .p1-6{left:9.5cqw;top:21.4cqw;width:36cqw;height:6cqw}
.cp .p1-7{left:9.5cqw;top:27.4cqw;width:36cqw;height:6cqw}
.cp .p1-8{left:9.5cqw;top:33.4cqw;width:36cqw;height:6cqw}
.cp .p1-9{left:9.5cqw;top:39.4cqw;width:36cqw;height:6cqw}
.cp .p1-10{left:9.5cqw;top:47.6cqw;font-size:2.4cqw;color:#66625C}
.cp .p1-11{left:50cqw;top:29.5cqw;width:4cqw;height:4cqw;color:#8C8983}
.cp .p1-12{left:55cqw;top:7cqw;width:39cqw;height:50cqw}
.cp .p1-13{left:58.5cqw;top:10.2cqw;font-size:2.6cqw;font-weight:600;white-space:nowrap}
.cp .p1-14{left:58.5cqw;top:15.4cqw;width:20cqw;height:7cqw}
.cp .p1-15{height:7cqw;line-height:7cqw;font-size:5.6cqw;font-weight:700}
.cp .p1-16{left:58.5cqw;top:22.6cqw;font-size:2.6cqw;white-space:nowrap}
.cp .p1-17{left:58.5cqw;top:28.6cqw;width:32cqw;border-top:1px solid #E3DFD7}
.cp .p1-18{left:58.5cqw;top:30.6cqw;width:32cqw;font-size:2.5cqw;line-height:1.4;color:#66625C}
.cp .p1-19{left:58.5cqw;top:46.6cqw;width:32cqw;height:7cqw}
/* Step 02's picture */
.cp .p2-1{left:6cqw;top:6cqw;width:88cqw;height:21cqw}
.cp .p2-2{left:10cqw;top:9.6cqw;width:50cqw;font-size:3.1cqw;font-weight:500;line-height:1.25}
.cp .p2-3{left:10cqw;top:19.8cqw;font-size:2.5cqw;color:#66625C}
.cp .p2-4{left:62cqw;top:9.2cqw;width:28cqw;height:6.6cqw}
.cp .p2-5{height:6.6cqw;line-height:6.6cqw;text-align:right;font-size:5.2cqw;font-weight:650}
.cp .p2-6{left:36cqw;top:17.6cqw;width:54cqw;height:4.4cqw}
.cp .p2-7{height:4.4cqw;line-height:4.4cqw;text-align:right;font-size:2.6cqw;color:#66625C}
.cp .p2-8{left:9cqw;top:31cqw}
.cp .p2-9{right:9cqw;top:31cqw}
.cp .p2-10{left:6cqw;top:35.4cqw;width:88cqw;height:23.4cqw}
.cp .p2-11{left:7cqw;top:36.5cqw;width:86cqw;height:7.2cqw}
.cp .p2-12{left:7cqw;top:43.7cqw;width:86cqw;height:7.2cqw}
.cp .p2-13{left:7cqw;top:50.9cqw;width:86cqw;height:7.2cqw}
/* Step 03's picture */
.cp .p3-1{left:12cqw;top:5cqw;width:76cqw;height:64cqw}
.cp .p3-2{left:17cqw;top:9cqw;font-size:2.3cqw}
.cp .p3-3{left:17cqw;top:12.2cqw;font-size:3.3cqw;font-weight:650}
.cp .p3-4{left:53cqw;top:9.2cqw;width:30cqw;text-align:right;font-size:2.4cqw;color:#66625C}
.cp .p3-5{left:53cqw;top:8.4cqw;width:30cqw;text-align:right;font-size:3.2cqw;font-weight:600;color:#A63D2A}
.cp .p3-6{left:17cqw;top:18.8cqw;width:66cqw;border-top:1px solid #8C8983}
.cp .p3-7{left:15cqw;top:20.2cqw;width:70cqw;height:6.4cqw}
.cp .p3-8{position:absolute;inset:0;border-radius:1cqw}
.cp .p3-9{position:relative}
.cp .p3-10{left:15cqw;top:27cqw;width:70cqw;height:6.4cqw}
.cp .p3-11{left:15cqw;top:33.8cqw;width:70cqw;height:6.4cqw}
.cp .p3-12{left:17cqw;top:42cqw;width:66cqw;border-top:1px solid #E3DFD7}
.cp .p3-13{left:17cqw;top:45cqw}
.cp .p3-14{left:53cqw;top:43.2cqw;width:30cqw;height:5.6cqw}
.cp .p3-15{height:5.6cqw;line-height:5.6cqw;text-align:right;font-size:4.2cqw;font-weight:700}
.cp .p3-16{left:55cqw;top:52cqw;width:28cqw;height:7.4cqw;font-size:2.9cqw}
.cp .p3-17{left:17cqw;top:53.8cqw;width:66cqw;font-size:2.5cqw;color:#66625C;white-space:nowrap}
/* Step 04's picture */
.cp .p4-1{left:6cqw;top:5.4cqw;width:37.2cqw;height:6.8cqw;background:#EEEDE9;border-radius:1.8cqw}
.cp .p4-2{left:6.6cqw;top:6cqw;width:18cqw;height:5.6cqw;border-radius:1.4cqw}
.cp .p4-3{left:6.6cqw;top:6cqw;width:18cqw;height:5.6cqw;display:flex;align-items:center;justify-content:center;gap:1.2cqw;font-size:2.6cqw;font-weight:600}
.cp .p4-4{display:inline-block;height:3.6cqw;line-height:3.6cqw}
.cp .p4-5{display:block}
.cp .p4-6{display:block;height:3.6cqw}
.cp .p4-7{left:24.6cqw;top:6cqw;width:18cqw;height:5.6cqw;display:flex;align-items:center;justify-content:center;gap:1.2cqw;font-size:2.6cqw;font-weight:500;color:#66625C}
.cp .p4-8{left:46cqw;top:6.8cqw;width:48cqw;height:4cqw}
.cp .p4-9{height:4cqw;line-height:4cqw;text-align:right;font-size:2.5cqw;color:#66625C}
.cp .p4-10{left:6cqw;top:15cqw;width:88cqw;height:44.4cqw;overflow:hidden}
.cp .p4-11{top:0}
.cp .p4-12{left:64cqw;background:#66625C}
.cp .p4-13{left:76cqw;background:#2A2B2F}
.cp .p4-14{top:5.8cqw}
.cp .p4-15{position:absolute;left:0;top:10.8cqw;width:88cqw;height:32.4cqw}
.cp .p4-16{top:0;border-top:1px solid #E3DFD7}
.cp .p4-17{top:10.8cqw;border-top:1px solid #E3DFD7}
.cp .p4-18{top:21.6cqw;border-top:1px solid #E3DFD7}
/* The Spanish page (es/): the app's Spanish labels are longer, and the app's buttons grow with their label, so
   these boxes are wider (same padding and same right edge as in English) or their text sits further along. */
html:lang(es) .cp .i26{left:74.3cqw;width:8.7cqw}
html:lang(es) .cp .i29{left:72.3cqw;width:15.3cqw}
html:lang(es) .cp .i75{left:14.6cqw}
html:lang(es) .cp .pmeta{flex-wrap:wrap;row-gap:.1cqw}
/* Step 04: "Compartir" needs a wider swipe action, so the row slides 4cqw further to show both actions. */
html:lang(es) .cp .p4-12{left:60cqw;width:16cqw}
html:lang(es) .cp .c4fg{transform:translateX(-28cqw);animation-name:c4fg-es}
@keyframes c4fg-es{0%,11%{transform:none}15%,92.9%{transform:translateX(-28cqw)}93%,100%{transform:none}}