@font-face{font-family:"Cooper";src:url(/fonts/cooper-black.9213bc49.woff2) format("woff2");font-weight:900;font-display:swap}
:root{color-scheme:light;--ground:#fff;--ink:#16181d;--secondary:#5b6270;--block:#f3f4f6;--display:"Cooper",ui-rounded,Georgia,serif;
--body:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;--radius-card:28px;--radius-tile:22px;
--shadow-tile:0 6px 18px rgba(22,24,29,.12);--shadow-lift:0 16px 40px rgba(22,24,29,.22);--sticker:drop-shadow(0 6px 8px rgba(22,24,29,.25))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.5 var(--body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-underline-offset:3px}
h1,h2{font-family:var(--display);font-weight:900;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:1248px;margin-left:auto;margin-right:auto;padding:0 20px}
main>section{margin-top:150px}
main>section:first-child{margin-top:24px}
.lead{font-size:20px;line-height:1.5}
.small{font-size:14px;line-height:1.45;color:var(--secondary)}
.button{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:29px;background:var(--ink);color:#fff;text-decoration:none;
font:900 18px/1 var(--display);box-shadow:0 8px 20px rgba(22,24,29,.22)}
.store{display:inline-block;border-radius:10px}
.store img{width:162px;height:54px}
.button:focus-visible,.pill:focus-visible,.store:focus-visible{outline:3px solid #2d7dff;outline-offset:3px}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 28px/1 var(--display)}
.brand img{width:30px;height:32px}
.top nav{display:flex;align-items:center;gap:24px}
.navlink{font:900 15px/1 var(--display);color:var(--secondary);text-decoration:none;padding:12px 0}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:900 15px/1 var(--display)}
/* hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.lockup{width:300px;height:auto;overflow:visible}
.hero h1{font-size:clamp(44px,7vw,92px);line-height:1;max-width:1000px}
.hero .lead{max-width:640px}
.hero .small{margin-top:-8px}
/* phones */
.ph{position:relative;margin:0}
.ph>img{border-radius:12%/5.5%;box-shadow:var(--shadow-lift);background:#f3f4f6}
.edge{position:absolute;left:0;right:0;top:-22px;width:100%;height:24px;overflow:visible;pointer-events:none}
.stk{position:absolute;width:auto;filter:var(--sticker);pointer-events:none}
.stage{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:30px}
.stage .mid{width:300px;z-index:2}
.stage .side{width:270px;margin-top:80px}
.stage .sl{transform:rotate(-6deg);margin-right:-30px}
.stage .sr{transform:rotate(6deg);margin-left:-30px}
.stage-l{left:calc(50% - 470px);top:430px;height:150px;transform:rotate(-8deg);z-index:3}
.stage-r{left:calc(50% + 330px);top:480px;height:140px;transform:rotate(7deg);z-index:3}
/* privacy band */
.band{position:relative;display:grid;grid-template-columns:1fr 260px;gap:64px;align-items:center;padding:88px 96px;border-radius:var(--radius-card);background:var(--ink);color:#fff}
.band>.edge{top:-22px}
.band h2{font-size:clamp(34px,4.2vw,60px);line-height:1.04}
.band-text{display:flex;flex-direction:column;gap:22px;max-width:640px}
.band-text p{font-size:20px;line-height:1.5;color:#d9dbe0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.12);font:900 15px/1.2 var(--display)}
.onink{color:#fff;font:900 15px/1.2 var(--display)}
.kept{position:relative;width:200px;height:380px;margin:0 auto;border-radius:32px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.9)}
.kept .edge{top:auto;bottom:10px;left:20px;width:calc(100% - 40px)}
.lockbadge{position:absolute;left:50%;top:-28px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:#ff4f8b;display:flex;align-items:center;justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(255,79,139,.35)}
.lockbadge svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k{position:absolute;height:104px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.k1{left:10px;top:114px;transform:rotate(-7deg)}.k2{left:84px;top:84px;transform:rotate(6deg)}
.k3{left:24px;top:212px;transform:rotate(5deg)}.k4{left:96px;top:220px;transform:rotate(-6deg)}
/* features */
.feat{display:flex;align-items:center;justify-content:center;gap:140px}
.feat.rev{flex-direction:row-reverse}
.feat-text{max-width:480px;display:flex;flex-direction:column;gap:18px}
.feat-text h2{font-size:clamp(34px,4vw,56px);line-height:1.04}
.feat-text p{font-size:19px;line-height:1.45}
.feat-pic{position:relative;width:300px;flex:none}
.feat-pic .ph{width:260px;margin:0 auto}
.tl{transform:rotate(-2deg)}.tr{transform:rotate(2deg)}
.stk-r{right:-50px;top:240px;height:140px;transform:rotate(8deg)}
.stk-l{left:-60px;top:330px;height:150px;transform:rotate(-7deg)}
.fall{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ask{position:relative;height:420px;display:flex;align-items:center;justify-content:center}
/* the Birthday leaf, from the ask card */
.leaf{position:relative;width:200px;height:236px;border-radius:24px;background:#fff;box-shadow:var(--shadow-lift);overflow:hidden;transform:rotate(-5deg)}
.leaf-band{height:56px;background:#ff4f8b;display:flex;align-items:center;justify-content:center;color:#fff;font:900 30px/1 var(--display)}
.hole{position:absolute;top:49px;width:10px;height:10px;border-radius:50%;background:#ffe4ee}
.hole:nth-of-type(1){left:18%}.hole:nth-of-type(2){left:29%}.hole:nth-of-type(3){left:40%}.hole:nth-of-type(4){left:51%}
.hole:nth-of-type(5){left:62%}.hole:nth-of-type(6){left:73%}.hole:nth-of-type(7){left:84%}
.leaf-mark{position:absolute;left:0;right:0;top:88px;text-align:center;font:900 100px/1 var(--display)}
.leaf-face{position:absolute;height:156px;width:auto;margin:150px 0 0 190px;transform:rotate(9deg);filter:drop-shadow(0 10px 12px rgba(22,24,29,.25))}
/* story */
.story{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.faces{display:flex;justify-content:center}
.face{height:100px;width:auto;margin:0 -12px;filter:var(--sticker)}
.face:nth-child(1){transform:rotate(-7deg)}.face:nth-child(2){transform:rotate(5deg)}.face:nth-child(3){transform:rotate(-4deg)}.face:nth-child(4){transform:rotate(8deg)}
.story h2{font-size:clamp(34px,4vw,56px);line-height:1.04;max-width:1000px;margin-top:-8px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:48px;text-align:left;width:100%;max-width:1168px}
.side-col{display:flex;flex-direction:column;gap:18px}
.side-label{font:900 15px/1.2 var(--display);color:var(--secondary)}
.quote{position:relative;margin:0;padding:26px 26px 22px;border-radius:var(--radius-tile);background:#fff;box-shadow:var(--shadow-tile);display:flex;flex-direction:column;gap:16px}
.quote blockquote{margin:0;font:900 22px/1.25 var(--display)}
.side-col:first-child .quote:nth-of-type(1){transform:rotate(-1.2deg)}.side-col:first-child .quote:nth-of-type(2){transform:rotate(.8deg)}
.side-col:last-child .quote:nth-of-type(1){transform:rotate(.6deg)}.side-col:last-child .quote:nth-of-type(2){transform:rotate(-.8deg)}
.story-end{font:900 32px/1.2 var(--display);max-width:900px;text-wrap:balance;margin-top:8px}
.story .small{margin-top:-16px}
/* pricing */
.pricing{display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center}
.pricing h2{font-size:clamp(34px,4vw,56px)}
.pricing-row{display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:center;width:100%;text-align:left}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:0;padding:40px 44px;list-style:none;border-radius:var(--radius-card);background:var(--block);font-size:16px;line-height:1.4}
.benefits li{display:flex;gap:12px;align-items:flex-start}
.tick{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.c0{background:#e0336f}.c1{background:#d9600a}.c2{background:#a88400}.c3{background:#15803d}.c4{background:#1f63d6}.c5{background:#7c3aed}
.plans{display:flex;flex-direction:column;gap:16px}
.plan{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:104px;padding:16px 24px;border-radius:var(--radius-tile);background:#fff;box-shadow:var(--shadow-tile)}
.plan.ink{background:var(--ink);color:#fff}
.plan-name{font:900 20px/1.2 var(--display)}
.plan-note{font-size:14px;line-height:1.4;color:var(--secondary);margin-top:4px}
.plan.ink .plan-note{color:#c9ccd3}
.plan-price{flex:none;font:900 30px/1 var(--display);white-space:nowrap}
.pricing .small{margin-top:-16px}
.pricing>.join{width:100%;max-width:480px;text-align:left}
.join{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--radius-tile);background:#fff;box-shadow:var(--shadow-tile)}
.join .small{margin:0;font-size:13px;line-height:1.45}
.field{display:flex;flex-direction:column;gap:6px}
.field>span:first-child,.choice legend{font-size:13px;line-height:16px;font-weight:700}
.field input,.field select,.choice label{min-height:46px;border:2px solid var(--block);border-radius:14px;background:var(--block);color:var(--ink);font:16px/1.2 var(--body)}
.field input{padding:0 14px}
.field input:focus,.field select:focus{outline:none;border-color:#2d7dff;background:#fff}
.sel{position:relative;display:flex}
.sel select{width:100%;padding:0 38px 0 14px;-webkit-appearance:none;appearance:none;cursor:pointer}
.sel select:has(option[value=""]:checked){color:#9ca3af}
.sel>svg{position:absolute;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--secondary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sel>svg{right:14px}
.choice{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.choice legend{width:100%;margin-bottom:6px;padding:0}
.choice label{flex:1 1 40%;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:15px;cursor:pointer}
.choice label:has(:checked){background:#e5e7eb;border-color:#e5e7eb}
.join input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.choice label:focus-within{border-color:#2d7dff}
.join .button{align-self:stretch;justify-content:center;min-height:50px;border:0;cursor:pointer;font:900 16px/1 var(--display);box-shadow:0 4px 12px rgba(22,24,29,.16)}
/* closer */
.closer{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.closer .lockup{width:260px}
.closer h2{font-size:clamp(40px,5.5vw,76px);line-height:1.02}
/* footer */
.foot{margin-top:150px;background:var(--block);padding:44px 0 36px}
.foot .wrap{position:relative;display:flex;flex-direction:column;gap:48px}
.foot .edge{top:-66px;left:20px;width:calc(100% - 40px)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot a{color:#454b57;font-size:15px}
.foot p{font-size:13px;color:#454b57}
/* short pages: psst, answer, birthdays, 404 */
.short{display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:center;min-height:calc(100vh - 300px);padding-top:56px;padding-bottom:40px}
.psst-pic{position:relative;display:flex;justify-content:center;padding:20px 0 40px}
.psst-text{display:flex;flex-direction:column;gap:18px;max-width:560px}
.psst-text h1{font-size:clamp(34px,4.6vw,60px);line-height:1.05}
.kicker{font:900 15px/1.2 var(--display);color:var(--secondary)}
.steps{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps span{flex:none;width:34px;height:34px;border-radius:50%;background:var(--block);display:flex;align-items:center;justify-content:center;font:900 16px/1 var(--display)}
.tile{padding:18px 20px;border-radius:var(--radius-tile);background:var(--block);display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tile-head{font:900 19px/1.2 var(--display)}
.desk-only{display:none}
.desk .desk-only{display:block}
.desk .iphone-only{display:none}
.short .button,.short .store{align-self:flex-start;margin-top:8px}
.lost{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;min-height:0;padding-top:80px}
.lost h1{font-size:clamp(36px,5vw,64px);line-height:1.05}
.lost .lead{max-width:560px}
.lost .lockup{width:280px}
.lost .button{align-self:center}
/* reading pages */
.read{max-width:760px;padding-top:40px}
.read h1{font-size:clamp(44px,6vw,72px);line-height:1;margin:24px 0 20px}
.read h2{font-size:26px;line-height:1.15;margin:44px 0 10px}
.read p,.read li{margin:0 0 14px;line-height:1.6}
.read .lead{font-size:20px}
.read .small{margin-bottom:8px}
.read .block{background:var(--block);border-radius:20px;padding:16px 20px;margin:24px 0}
/* motion: the first visit only, never with Reduce Motion */
@keyframes bd-pop{0%{transform:scale(1)}15%{transform:scale(.93)}40%{transform:scale(1.05)}60%,100%{transform:scale(1)}}
@keyframes bd-land{0%{transform:translate(0,-120px) rotate(-220deg);opacity:0}25%{opacity:1}75%{transform:translate(0,6px) rotate(8deg)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
.throw .hero-mark .m{animation:bd-pop .9s ease-out both;transform-origin:60px 128px}
.throw .hero-mark .p{animation:bd-land 1s cubic-bezier(.3,.7,.4,1) both;transform-box:fill-box;transform-origin:center}
}
/* tablets: keep the two columns, closer together and smaller */
@media (max-width:1100px){
main>section{margin-top:120px}
.stage .mid{width:240px}
.stage .side{width:210px;margin-top:64px}
.stage-l{left:max(8px,calc(50% - 370px));top:330px;height:120px}
.stage-r{left:min(calc(100% - 110px),calc(50% + 250px));top:370px;height:110px}
.band{grid-template-columns:1fr 200px;gap:40px;padding:72px 56px}
.feat{gap:64px}
.feat-text{max-width:400px}
.feat-pic{width:250px}
.feat-pic .ph{width:220px}
.stk-r{right:-30px;top:200px;height:120px}.stk-l{left:-40px;top:280px;height:120px}
.pricing-row{grid-template-columns:1fr 380px;gap:32px}
.benefits{grid-template-columns:1fr;padding:32px}
}
/* phones: one column, everything centered on one axis */
@media (max-width:700px){
main>section{margin-top:96px}
.top nav{gap:16px}
.navlink[href="/support"]{display:none}
.lead{font-size:18px}
.lockup{width:240px}
.stage{padding-top:20px;overflow:hidden;margin-left:0;margin-right:0;max-width:none}
.stage .mid{width:200px}
.stage .side{width:170px;margin-top:60px}
.stage .sl{margin-right:-50px}.stage .sr{margin-left:-50px}
.stage-l{left:12px;top:310px;height:92px}
.stage-r{display:none}
.band{grid-template-columns:1fr;gap:40px;padding:84px 24px 32px}
.kept{width:120px;height:228px;border-radius:20px;order:-1}
.kept .k{height:62px}
.k1{left:6px;top:68px}.k2{left:50px;top:50px}.k3{left:14px;top:127px}.k4{left:58px;top:132px}
.lockbadge{width:40px;height:40px;top:-20px}.lockbadge svg{width:22px;height:22px}
.band-text p{font-size:17px}
.feat,.feat.rev{flex-direction:column;align-items:stretch;gap:40px}
.feat-pic{margin:0 auto}
.feat-pic .ph{width:190px}
.stk-r{right:-10px;top:170px;height:110px}.stk-l{left:-10px;top:240px;height:110px}
.ask{height:330px}
.leaf{width:160px;height:189px}.leaf-band{height:45px;font-size:24px}.hole{top:40px;width:8px;height:8px}.leaf-mark{top:68px;font-size:80px}
.leaf-face{height:124px;margin:120px 0 0 150px}
.face{height:84px}
.sides{grid-template-columns:1fr;gap:36px}
.story{text-align:left;align-items:stretch}.faces{justify-content:center}
.story-end{font-size:24px}
.pricing{align-items:stretch;text-align:left}
.pricing-row{grid-template-columns:1fr}
.benefits{grid-template-columns:1fr;padding:0;background:none;border-radius:0;font-size:15px}
.plan-price{font-size:26px}
.closer .lockup{width:200px}
.short{grid-template-columns:1fr;gap:24px;padding-top:24px;min-height:0}
.psst-pic{padding:10px 0 20px}
.psst .leaf{width:140px;height:165px}
.foot{margin-top:96px}
.band{text-align:center;justify-items:center;gap:32px;padding:72px 24px 36px}
.band-text{align-items:center}
.band h2{font-size:32px}
.chips{justify-content:center}
.feat-text{text-align:center;align-items:center;margin:0 auto}
.feat-text h2{font-size:32px}
.feat-text p{font-size:17px}
.story{text-align:center;align-items:center}
.story h2{font-size:32px}
.pricing{text-align:center}
.pricing h2{font-size:32px}
.pricing-row{text-align:left}
.side-label{text-align:center}
.quote blockquote{font-size:19px}
.band h2{font-size:29px}
.kept{width:104px;height:196px}
.kept .k{height:54px}
.k1{left:4px;top:58px}.k2{left:44px;top:42px}.k3{left:10px;top:108px}.k4{left:50px;top:114px}
}
@media (max-width:374px){.top nav{gap:12px}.pill{padding:0 14px}.brand{font-size:24px}}
@media (max-width:359px){.navlink{display:none}}
.throw .hero-mark .p:nth-of-type(1){animation-delay:0.08s}.throw .hero-mark .p:nth-of-type(2){animation-delay:0.13s}.throw .hero-mark .p:nth-of-type(3){animation-delay:0.18s}.throw .hero-mark .p:nth-of-type(4){animation-delay:0.23s}.throw .hero-mark .p:nth-of-type(5){animation-delay:0.08s}.throw .hero-mark .p:nth-of-type(6){animation-delay:0.13s}.throw .hero-mark .p:nth-of-type(7){animation-delay:0.18s}.throw .hero-mark .p:nth-of-type(8){animation-delay:0.23s}
/* cut-outs: /cutouts and /cutouts/ideas (folded into the site stylesheet by site-build.py; the CSP allows no inline styles) */
.cut [hidden],.ideas [hidden]{display:none!important}
.cut .wrap,.cut-step.wrap,.ideas.wrap{padding-left:16px;padding-right:16px}
.cut>.cut-step{margin-top:16px}
.cut-step{display:flex;flex-direction:column;gap:28px}
.cut-text,.cut-pic{display:flex;flex-direction:column;gap:16px;min-width:0}
.cut h1{font-size:36px;line-height:1.06}
.cut h1:focus{outline:none}
.cut .label{font:900 17px/1.2 var(--display)}
.cut .lead{font-size:17px}
.cut-vh,.cut-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cut-file+label{cursor:pointer}
.cut-file:focus-visible+label{outline:3px solid #2d7dff;outline-offset:3px}
.cut :focus-visible,.ideas :focus-visible{outline:3px solid #2d7dff;outline-offset:3px}
.cut .button,.cut .button-plain{align-self:flex-start;justify-content:center}
button.button,button.button-plain{border:0;cursor:pointer}
button.button:disabled,button.button-plain:disabled{opacity:.45;cursor:default}
.button-plain{display:inline-flex;align-items:center;min-height:56px;padding:0 26px;border-radius:29px;background:var(--block);color:var(--ink);text-decoration:none;font:900 18px/1 var(--display)}
.cut-link{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:900 17px/1.2 var(--display);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cut-line{font-size:15px;line-height:1.45;font-weight:600}
.cut-line:empty,.cut-hint:empty{display:none}
.cut-actions{display:flex;flex-wrap:wrap;gap:10px}
.cut .choice label{min-height:46px}
.cut .choice input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.cut input[type=range]{width:100%;min-height:44px;margin:0;accent-color:var(--ink);background:none;border:0;padding:0}
.cut-foot{margin:56px 16px 0;text-align:center}
/* the cupcake row, faces on toothpicks (cutouts-gen.py cupcakes(): picks at 20, 43, 65 and 86.5 percent) */
.cut-scene{position:relative;aspect-ratio:3/2;margin:0 -16px;overflow:hidden}
.cut-cupcakes{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cut-scene .cut-tooth{position:absolute;top:42.4%;height:10.7%;width:3px;border-radius:2px;background:#d9b98a}
.cut-scene .cut-pick{position:absolute;top:17.5%;height:25.4%;width:auto;max-width:none;filter:var(--sticker)}
.cut-scene .t1{left:19.7%}.cut-scene .t2{left:42.7%}.cut-scene .t3{left:64.7%}.cut-scene .t4{left:86.2%}
.cut-scene .p1{left:13.9%;transform:rotate(-4deg)}.cut-scene .p2{left:36.9%;transform:rotate(5deg)}
.cut-scene .p3{left:58.9%;transform:rotate(-3deg)}.cut-scene .p4{left:80.4%;transform:rotate(6deg)}
.cut-scene-small{margin:0;border-radius:0!important}
.cut-scene-small .cut-tooth{top:43.6%;height:9%}
.cut-scene-small .cut-pick{top:22.6%;height:21.5%}
.cut-scene-small .p1{left:14.9%}.cut-scene-small .p2{left:37.9%}.cut-scene-small .p3{left:59.9%}.cut-scene-small .p4{left:81.4%}
/* the three kinds on the landing */
.cut-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 0;padding:0;list-style:none}
.cut-kinds li{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--radius-tile);background:var(--block)}
.cut-kind-art{position:relative;display:block;height:56px}
.cut-kind-name{font:900 14px/1.2 var(--display)}
.cut-kinds img{position:absolute;width:auto;max-width:none;filter:drop-shadow(0 3px 4px rgba(22,24,29,.25))}
.cut-cake{position:absolute;left:12px;top:34px;width:36px;height:30px}
.cut-frost{position:absolute;left:0;top:0;width:36px;height:18px;border-radius:18px 18px 6px 6px;background:#bfe6da;background-image:radial-gradient(circle,#ff4f8b 1px,transparent 1.5px),radial-gradient(circle,#ffd21f 1px,transparent 1.5px),radial-gradient(circle,#2d7dff 1px,transparent 1.5px);background-size:9px 7px,11px 9px,13px 8px;background-position:2px 3px,6px 1px,1px 7px}
.cut-wrap{position:absolute;left:4px;top:15px;width:28px;height:15px;clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);background:#e8c99a;background-image:repeating-linear-gradient(90deg,transparent 0 4px,rgba(22,24,29,.08) 4px 6px)}
.cut-kinds .cut-tooth{position:absolute;left:29px;top:26px;width:2px;height:12px;border-radius:1px;background:#d9b98a}
.cut-kinds .cut-stick{position:absolute;left:38px;top:30px;width:7px;height:30px;border-radius:3px;background:#d9b98a;box-shadow:inset -2px 0 0 rgba(22,24,29,.08)}
.ka-mama{left:16px;top:-16px;height:42px;transform:rotate(-5deg)}
.ka-felix{left:14px;top:-14px;height:56px;transform:rotate(4deg)}
.cut-kinds .cut-string{position:absolute;left:0;top:0;width:100%;height:28px;overflow:visible}
.ka-hang{top:7px;height:32px}
.ka-hang.h1{left:1%;transform:rotate(6deg)}
.ka-hang.h2{left:26%;top:11px;transform:rotate(-4deg)}
.ka-hang.h3{left:51%;top:11px;transform:rotate(4deg)}
.ka-hang.h4{left:76%;transform:rotate(-6deg)}
/* the peel: the face lifts out of the greyed photo */
.cut-stage{position:relative;width:fit-content;max-width:100%;margin:12px auto 0}
.cut-photo{display:block;max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:var(--radius-tile);filter:grayscale(1) brightness(1.15) opacity(.35)}
.cut-out{position:absolute;height:auto;max-width:none;transform-origin:50% 60%;transition:transform 300ms cubic-bezier(.3,.7,.4,1),filter 300ms}
.cut-out.lifted{transform:translateY(-8px) rotate(-7deg) scale(1.05);filter:var(--sticker)}
.cut-draw{display:flex;flex-direction:column;gap:14px}
.cut-canvas-wrap{position:relative;width:fit-content;max-width:100%;margin:0 auto}
#cut-canvas{display:block;max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:var(--radius-tile);background:var(--block);touch-action:none;cursor:crosshair}
.cut-found{position:absolute;inset:0;pointer-events:none}
.cut-person{position:absolute;padding:0;border:0;background:none;color:transparent;font-size:1px;pointer-events:none}
.cut-person:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.cut .field input[type=text]{width:100%}
/* make: what it's for, and a hat */
.cut-out-tile{display:flex;align-items:flex-end;justify-content:center;height:220px;padding:20px;border-radius:var(--radius-tile);background:var(--block)}
.cut-out-big{height:78%;max-height:100%;width:auto;max-width:100%;filter:var(--sticker);transform:rotate(-5deg)}
.cut-pic .cut-actions{gap:24px}
.cut-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;border:0;min-width:0}
.cut-kind{position:relative;margin:0;padding:14px;gap:4px;cursor:pointer;min-height:140px}
.cut-kind input{position:absolute;opacity:0;pointer-events:none}
.cut-kind:has(:checked){background:#fff;box-shadow:0 0 0 2px var(--ink),var(--shadow-tile)}
.cut-kind:has(:focus-visible){outline:3px solid #2d7dff;outline-offset:3px}
.cut-kind-text{display:flex;flex-direction:column;gap:4px}
.cut-kind .small{font-size:13px}
.cut-mini{position:relative;display:block;height:70px}
.cut-me{position:absolute;left:50%;top:0;height:58px;width:auto;max-width:none;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 3px 4px rgba(22,24,29,.25))}
.cut-me:not([src]){display:none}
.cut-mini .cut-cake{left:calc(50% - 18px);top:44px}
.cut-mini-cupcake .cut-me{height:46px}
.cut-mini .cut-tooth{position:absolute;left:calc(50% - 1px);top:38px;width:2px;height:12px;border-radius:1px;background:#d9b98a}
.cut-mini .cut-stick{position:absolute;left:calc(50% - 4px);top:40px;width:8px;height:32px;border-radius:3px;background:#d9b98a;box-shadow:inset -2px 0 0 rgba(22,24,29,.08)}
.cut-mini-stick .cut-me{top:-6px;height:62px}
.cut-foot-tab{position:absolute;left:calc(50% - 22px);top:56px;width:44px;height:12px;background:#fff6e8;border-radius:0 0 4px 4px;box-shadow:0 2px 4px rgba(22,24,29,.12)}
.cut-mini-hang .cut-string{position:absolute;left:0;top:0;width:100%;height:30px;overflow:visible}
.cut-mini-hang .cut-me{top:9px;height:38px;left:13%;transform:translateX(-50%) rotate(6deg)}
.cut-mini-hang .cut-me+.cut-me{left:38%;top:15px;transform:translateX(-50%) rotate(-4deg)}
.cut-mini-hang .cut-me+.cut-me+.cut-me{left:62%;top:15px;transform:translateX(-50%) rotate(4deg)}
.cut-mini-hang .cut-me+.cut-me+.cut-me+.cut-me{left:87%;top:9px;transform:translateX(-50%) rotate(-6deg)}
.cut-more{display:flex;flex-direction:column;gap:12px}
.cut-people{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.cut-people button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px;padding:8px;border:2px solid transparent;border-radius:12px;background:none;color:var(--ink);font:900 14px/1.2 var(--display);cursor:pointer}
.cut-people button[aria-pressed=true]{border-color:var(--ink)}
.cut-people img{height:64px;width:auto;filter:drop-shadow(0 3px 4px rgba(22,24,29,.25))}
fieldset.cut-hats{border:0;min-inline-size:0}
.cut-hats{margin:0;gap:10px;min-width:0}
.cut-hats legend{float:left;width:100%;padding:0;margin-bottom:10px}
.cut-hat-chips{clear:both}
.cut-hats legend .small{font-weight:600;margin-left:6px}
.cut-switch{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer}
.cut-switch input{-webkit-appearance:none;appearance:none;position:relative;width:50px;height:30px;margin:0;border-radius:15px;background:#d1d5db;cursor:pointer;transition:background .2s}
.cut-switch input::before{content:"";position:absolute;left:2px;top:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(22,24,29,.3);transition:transform .2s}
.cut-switch input:checked{background:var(--ink)}
.cut-switch input:checked::before{transform:translateX(20px)}
.cut-hat-chips{display:flex;flex-wrap:wrap;gap:4px}
.cut-nohat{font:900 13px/1 var(--display)}
#cut-card-name:disabled{opacity:.45}
.cut-hat-chips label{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;cursor:pointer}
.cut-hat-chips input{position:absolute;opacity:0;pointer-events:none}
.cut-hat-chips img{width:40px;height:40px;object-fit:contain}
.cut-hat-chips label:has(:checked){background:#fff;box-shadow:0 0 0 2px var(--ink)}
.cut-hat-chips label:has(:focus-visible){outline:3px solid #2d7dff;outline-offset:2px}
/* print: the pages on screen, then only the pages on paper (app.js inserts the @page rule) */
.cut-pages{min-width:0}
.page{width:100%;aspect-ratio:210/297;background:#fff;box-shadow:var(--shadow-tile);margin:16px 0;overflow:hidden}
.page.letter{aspect-ratio:215.9/279.4}
.page svg{width:100%;height:100%}
.cut .steps li{font-size:16px;line-height:1.45}
.cut-about{display:flex;flex-direction:column;gap:80px;margin-top:80px}
.cut-about h2{font-size:clamp(32px,4vw,52px);line-height:1.04;margin:0}
.how{display:flex;flex-direction:column;gap:28px}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 14px;margin:0;padding:0;list-style:none}
.how-step{display:flex;flex-direction:column;gap:8px}
.how-art{position:relative;aspect-ratio:4/3;margin-bottom:10px;border-radius:var(--radius-tile);background:#fbf6ef;overflow:hidden}
.how-art img{position:absolute;width:auto;max-width:none}
.how-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#fff;font:900 16px/1 var(--display)}
.how-n.c1{background:#FF4F8B}.how-n.c2{background:#FF7A1A}.how-n.c3{background:#22C55E}.how-n.c4{background:#2D7DFF}
.how-step h3{margin:4px 0 0;font:900 22px/1.15 var(--display)}
.how-step p{margin:0;font-size:16px;line-height:1.45;color:var(--secondary)}
.how-snap{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:4/5;border:6px solid #fff;border-radius:6px;background:#bfe3ec;box-shadow:var(--shadow-tile);transform:translate(-50%,-50%) rotate(-4deg);overflow:hidden}
.how-snap img{left:50%;bottom:-6%;height:92%;transform:translateX(-50%)}
.how-2 .how-snap img{filter:grayscale(1);opacity:.35}
.how-art .how-lift{left:50%;top:50%;height:62%;transform:translate(-34%,-62%) rotate(6deg);filter:var(--sticker) drop-shadow(0 14px 14px rgba(0,0,0,.22))}
.how-art .how-face{left:50%;top:16%;height:60%;transform:translateX(-50%) rotate(-3deg);filter:var(--sticker)}
.how-art .how-hat{left:50%;top:13.5%;width:17%;height:auto;transform:translateX(-62%) rotate(-12deg)}
.how-kinds{position:absolute;left:0;right:0;bottom:7%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0 8px;list-style:none}
.how-kinds li{padding:5px 10px;border-radius:999px;background:#fff;box-shadow:var(--shadow-tile);font:900 12px/1.2 var(--display)}
.how-paper{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:210/297;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:9% 7%;background:#fff;box-shadow:var(--shadow-tile);transform:translate(-50%,-50%) rotate(3deg)}
.how-paper img{position:static;width:100%;height:100%;object-fit:contain;outline:1.5px dashed #9aa0aa;outline-offset:1px;border-radius:40%}
.how-scissors{position:absolute;right:10%;bottom:8%;width:20%;height:auto;transform:rotate(-28deg);fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.need .band-text{gap:28px}
.need-list{display:grid;grid-template-columns:1fr;gap:14px 28px;margin:0;padding:0;list-style:none}
.need-list li{display:flex;align-items:center;gap:14px;font-size:18px;line-height:1.3}
.need-list svg{flex:none;width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.button.on-ink{align-self:flex-start;background:#fff;color:var(--ink)}
.need-pic{display:flex;align-items:center;justify-content:center}
.need-prop{display:flex;flex-direction:column;align-items:center;transform:rotate(-5deg)}
.need-face{position:relative;z-index:1;height:200px;width:auto;max-width:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.need-stick{width:18px;height:140px;margin-top:-40px;border-radius:3px;background:#d9b98a}
.cut-ideas{display:flex;flex-direction:column;gap:28px}
.cut-ideas .idea h3{margin:8px 0 0;font:900 24px/1.1 var(--display)}
.cut-ideas>.lead{margin:-12px 0 0}
.faq{display:grid;grid-template-columns:1fr;gap:24px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq details{padding:0 20px;border-radius:var(--radius-tile);background:var(--block)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;cursor:pointer;list-style:none;font:900 18px/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid #2d7dff;outline-offset:3px}
.faq summary svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{margin:0 0 18px;font-size:16px;line-height:1.5}
.cut-birdie{padding-bottom:40px}
@media (min-width:600px){.how-grid{gap:28px}.need-list{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.how-grid{grid-template-columns:repeat(4,1fr)}.faq{grid-template-columns:320px 1fr;gap:64px}.cut-about{gap:120px;margin-top:120px}}
@media (max-width:599px){.how-step h3{font-size:18px}.how-step p{font-size:14px}.how-kinds{display:none}.how-art .how-face{top:24%;height:66%}.how-art .how-hat{top:20%}.how-snap{border-width:4px}}
@media (max-width:700px){.need .band-text{align-items:stretch;text-align:left}.button.on-ink{align-self:center}}
/* who's next */
.cut-after{display:flex;flex-wrap:wrap;gap:8px 24px}
.cut-after a{display:inline-flex;align-items:center;min-height:44px;font:900 16px/1.2 var(--display)}
.cut-after a+a{color:var(--secondary)}
/* the home band */
.cut-band-pic{position:relative;display:flex;justify-content:center}
.cut-band-face{height:220px;width:auto;transform:rotate(-6deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
/* the ideas page */
.ideas-grid{display:grid;grid-template-columns:1fr;gap:20px}
.idea{margin:0;padding:0 16px 16px;gap:8px;overflow:hidden;background:#fff;box-shadow:var(--shadow-tile)}
.idea h2{font-size:24px;line-height:1.1;margin-top:8px}
.idea p{font-size:15px;line-height:1.45}
.idea-make{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font:900 16px/1.2 var(--display);text-decoration:underline;cursor:pointer}
.idea-art{position:relative;margin:0 -16px;aspect-ratio:3/2;background:#fbf6ef;overflow:hidden}
.idea-art img{position:absolute;width:auto;max-width:none;filter:var(--sticker)}
.idea-art .cut-string{position:absolute;left:2.86%;top:22.5%;width:94.3%;height:36.8%;overflow:visible}
.ia-body{position:absolute;top:61%;width:24.6%;height:33%;border-radius:30px 30px 6px 6px;opacity:.85}
.ia-body.b1{left:6.3%;background:#ff4f8b}.ia-body.b2{left:37.7%;background:#2d7dff}.ia-body.b3{left:69.1%;background:#22c55e}
.ia-stick{position:absolute;top:48.4%;width:2.86%;height:31.6%;border-radius:4px;background:#d9b98a}
.ia-stick.s1{left:17.1%}.ia-stick.s2{left:48.6%}.ia-stick.s3{left:80%}
.idea-art .ia-head{top:0;height:59%}
.ia-head.h1{left:8%;transform:rotate(-6deg)}.ia-head.h2{left:39.5%;transform:rotate(5deg)}.ia-head.h3{left:70.9%;transform:rotate(-4deg)}
.ia-pin{position:absolute;width:4%;height:4.2%;border-radius:2px;background:#d9b98a}
.ia-pin.n1{left:14.1%;top:30.1%;transform:rotate(6deg)}.ia-pin.n2{left:36.4%;top:34.3%;transform:rotate(-6deg)}
.ia-pin.n3{left:61.4%;top:34.2%;transform:rotate(6deg)}.ia-pin.n4{left:84.1%;top:29.5%;transform:rotate(-6deg)}
.idea-art .ia-hang{height:36.8%}
.ia-hang.g1{left:7.2%;top:33.3%;transform:rotate(5deg)}.ia-hang.g2{left:29.4%;top:37.5%;transform:rotate(-5deg)}
.ia-hang.g3{left:51.8%;top:37.3%;transform:rotate(5deg)}.ia-hang.g4{left:79.5%;top:32.6%;transform:rotate(-5deg)}
.ia-card{position:absolute;left:24.3%;top:61%;width:51.4%;height:28.4%;border-radius:4px;background:#fff;box-shadow:var(--shadow-tile);border-top:10px solid #f3f4f6}
.idea-art .ia-guest{left:50%;top:16.8%;height:50.5%;transform:translateX(-50%) rotate(-4deg)}
.ia-name{position:absolute;left:24.3%;top:70%;width:51.4%;text-align:center;font:900 18px/1.2 var(--display);color:var(--ink)}
.ia-plate{position:absolute;left:84.3%;top:65.3%;width:11.4%;aspect-ratio:1;border-radius:50%;background:var(--block)}
/* computers: two columns, the picture beside the words (canvas board Cut-Desktop) */
@media (min-width:900px){
.cut>.cut-step{margin-top:48px}
.cut-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.cut h1{font-size:56px;line-height:1.04}
.cut .lead{font-size:19px}
.cut-scene{margin:0;border-radius:var(--radius-card)}
#step-land .cut-scene,#step-next .cut-scene{order:2}
#step-make{grid-template-columns:560px minmax(0,1fr);align-items:start}
.cut-out-tile{height:420px}
.cut-options{grid-template-columns:1fr 1fr;gap:14px}
.cut-kind{flex-direction:row;align-items:center;gap:16px;min-height:112px}
.cut-mini{flex:none;width:90px;height:80px}
#step-print{align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
#step-print .cut-text{position:sticky;top:24px}
.cut-pages .page:first-child{margin-top:0}
.cut-photo,#cut-canvas{max-height:70vh}
.cut-band-face{height:260px}
.ideas-grid{grid-template-columns:1fr 1fr;gap:28px}
.idea{padding:0 24px 24px}
.idea-art{margin:0 -24px}
}
@media (prefers-reduced-motion:reduce){
.cut-out,.cut-switch input,.cut-switch input::before{transition:none}
}
@media print{
body>header,body>footer,.cut>*:not(#step-print){display:none!important}
.cut>#step-print{display:block!important;margin:0;padding:0;max-width:none}
#step-print>*{display:none!important}
#step-print>#cut-pages{display:block!important}
.page{width:210mm;height:297mm;aspect-ratio:auto;margin:0;box-shadow:none;break-after:page;break-inside:avoid}
.page.letter{width:215.9mm;height:279.4mm}
.page:last-child{break-after:auto}
}