@font-face{font-family:Archivo;src:url('/brands/pupple/assets/Archivo-Variable.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}@font-face{font-family:'DM Sans';src:url('/brands/pupple/assets/DMSans-Regular.ttf');font-weight:400;font-display:swap}@font-face{font-family:'DM Sans';src:url('/brands/pupple/assets/DMSans-Medium.ttf');font-weight:500;font-display:swap}@font-face{font-family:'DM Sans';src:url('/brands/pupple/assets/DMSans-SemiBold.ttf');font-weight:600;font-display:swap}
:root{--night:#1d2150;--blue:#afbcf3;--mist:#ece4ef;--chalk:#f7f4ee;--light:#f26d5b;--line:#1d215030;--ease:cubic-bezier(.45,0,.15,1);font-family:'DM Sans',sans-serif;color:var(--night);background:var(--chalk);font-synthesis:none}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:24px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}::selection{background:var(--night);color:var(--chalk)}p,h1,h2,h3{margin:0}img,video{display:block;max-width:100%}.skip{position:fixed;top:-100px;left:20px;padding:15px;z-index:20;background:var(--night);color:var(--chalk)}.skip:focus{top:10px}header{max-width:1800px;height:106px;margin:auto;padding:20px 4%;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{width:180px;display:block}.logo img{width:100%;height:auto}nav{display:flex;align-items:center;gap:34px;font-size:16px;font-weight:500}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border:0;border-radius:40px;min-height:52px;background:var(--night);color:var(--chalk);padding:15px 25px;font-size:17px;font-weight:500;transition:transform .4s var(--ease),box-shadow .4s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #1d215020}.button:active{transform:translateY(0)}.button>span{font-size:24px;line-height:1}.hero{max-width:1800px;margin:auto;padding:28px 4% 0}.hero-top{display:grid;grid-template-columns:1fr 2fr;align-items:end;gap:6%;padding:20px 0 48px}.hero-top p{font-size:21px;line-height:1.5;padding-bottom:8px}h1,h2,h3,.big-copy{font-family:Archivo,sans-serif;font-weight:820;font-stretch:116%;letter-spacing:-.035em;word-spacing:.04em;line-height:.98}h1{font-size:clamp(72px,8.3vw,145px)}h1 span{color:var(--night)}.hero-photo{position:relative;aspect-ratio:2.12;overflow:hidden;border-radius:10px 10px 100px 10px;background:var(--blue)}.hero-photo video{width:100%;height:100%;object-fit:cover}.motion-control{position:absolute;left:26px;bottom:26px;padding:13px 20px;min-height:46px;border:0;border-radius:40px;background:var(--chalk);color:var(--night);font-weight:500;display:flex;gap:24px;align-items:center}.photo-note{position:absolute;left:26px;top:25px;border-radius:4px;padding:10px 14px;background:var(--chalk);font-size:15px}.why{max-width:1600px;margin:auto;padding:110px 6%}.hello-mark{width:80px;height:80px;object-fit:contain;margin-bottom:28px}.big-copy{font-size:clamp(42px,5.3vw,90px);max-width:1200px;line-height:1.03}.big-copy span{color:var(--night);opacity:.64}.why-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14%;align-items:end;margin-top:40px}.why-bottom p{font-size:20px;line-height:1.6;max-width:480px}.underlined{font-size:18px;border-bottom:1px solid var(--night);padding-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:20px}.underlined span{font-size:28px}.personality{padding:85px max(4%,calc((100vw - 1656px)/2));background:var(--blue)}h2{font-size:clamp(46px,5vw,84px)}.personality-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}.personality-heading p{font-size:19px;line-height:1.5;max-width:240px}.personality-picker{display:grid;grid-template-columns:1.05fr 1fr;gap:8%}.choice-list{display:flex;flex-direction:column;justify-content:center}.choice-list button{background:transparent;text-align:left;border:0;border-bottom:1px solid var(--line);color:var(--night);padding:27px 0;display:flex;gap:20px;align-items:center;font-size:clamp(19px,1.9vw,29px);font-weight:500;letter-spacing:-.035em;transition:padding .4s var(--ease)}.choice-list button>span:first-child{font-size:15px;width:24px;opacity:.65;letter-spacing:0}.choice-list button>span:last-child{margin-left:auto;transition:transform .3s}.choice-list button[aria-pressed=true]{padding-left:14px;border-bottom:2px solid var(--night)}.choice-list button:hover>span:last-child{transform:rotate(45deg)}.personality-result{min-height:390px;padding:40px 45px;border-radius:10px 70px 10px 10px;background:var(--chalk)}.pair{display:flex;gap:15px;margin-bottom:24px;height:80px}.pair img{width:70px;height:70px;object-fit:contain;transition:transform .6s var(--ease)}.pair img:first-child{transform:rotate(-14deg)}.pair img:last-child{transform:rotate(14deg)}.personality-result:hover .pair img{transform:rotate(0)}.personality-result h3{font-size:clamp(34px,3.2vw,52px);max-width:470px;line-height:1.02;margin-bottom:22px}.personality-result p{font-size:18px;line-height:1.5;max-width:410px}.community{max-width:1800px;margin:auto;padding:100px 4%;display:grid;grid-template-columns:1.12fr 1fr;gap:7%;align-items:center}.community-photo{border-radius:10px 10px 10px 90px;overflow:hidden;aspect-ratio:1.1;background:var(--mist)}.community-photo img{width:100%;height:100%;object-fit:cover;object-position:55% center}.community-copy h2{font-size:clamp(44px,4.4vw,75px)}.community-copy p{font-size:20px;line-height:1.6;max-width:340px;margin-top:26px}.community-copy .eyebrow{margin:0 0 26px;font-size:17px}.questions{max-width:1656px;margin:auto;padding:75px 4% 100px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10%}.questions h2{font-size:clamp(46px,4.7vw,78px)}details{border-bottom:1px solid var(--line)}summary{list-style:none;padding:25px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:21px;font-weight:500;cursor:pointer}summary::-webkit-details-marker{display:none}summary span{font-size:30px;font-weight:400;transition:transform .25s}details[open] summary span{transform:rotate(45deg)}details p{font-size:18px;line-height:1.6;padding-bottom:28px;max-width:540px}details a{text-decoration:underline;text-underline-offset:5px}.closing{background:var(--mist);padding:75px 5% 90px;text-align:center}.closing>img{width:85px;height:85px;margin:0 auto 30px}.closing h2{font-size:clamp(60px,7vw,120px);margin-bottom:38px}footer{padding:65px max(4%,calc((100vw - 1656px)/2)) 35px;background:var(--night);color:var(--chalk)}.footer-logo{display:block;width:min(100%,1100px);margin:0 auto 65px}.footer-logo img{width:100%;height:auto}.footer-bottom{display:flex;align-items:center;gap:28px;font-size:15px;border-top:1px solid #f7f4ee55;padding-top:25px}.footer-bottom p{flex:1}.footer-bottom button{background:none;color:inherit;border:0;padding:6px}dialog{max-width:min(90vw,600px);padding:48px;background:var(--chalk);color:var(--night);border:0;border-radius:12px}dialog::backdrop{background:#1d2150b0;backdrop-filter:blur(5px)}dialog h2{font-size:40px;line-height:1.05;margin-bottom:24px}dialog p{font-size:18px;line-height:1.6;margin-bottom:28px}dialog .close:first-child{position:absolute;right:20px;top:10px;background:none;border:0;color:inherit;font-size:30px}.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}.js-motion .reveal:not(.visible){opacity:0;transform:translateY(22px)}.launch-film{max-width:1800px;margin:auto;padding:90px 4% 0}.launch-film h2{margin-bottom:30px}.launch-film video{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--night);border-radius:10px}.film-transcript{max-width:850px}
@media(max-width:1050px){nav{gap:22px}h1{font-size:9vw}.hero-top{grid-template-columns:.8fr 1.8fr}.hero-top p{font-size:18px}.personality-heading p{max-width:220px}.personality-result{padding:32px}.community{gap:5%}.community-copy h2{font-size:5.2vw}.community-copy p{font-size:18px}.choice-list button{font-size:23px}}
@media(max-width:760px){header{height:82px;padding:20px 5%}.logo{width:140px}nav>a:not(.button){display:none}nav .button{min-height:44px;font-size:15px;padding:11px 18px;gap:18px}.hero{padding:20px 5% 0}.hero-top{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:0 0 30px}.hero-top p{font-size:17px}.hero-top p br{display:none}h1{font-size:clamp(58px,13vw,94px);line-height:.98}.hero-photo{aspect-ratio:.85;border-radius:8px 8px 65px 8px}.hero-photo video{object-position:45% center}.photo-note{font-size:14px;top:18px;left:16px;right:16px;width:max-content;max-width:calc(100% - 32px);padding:9px 12px}.motion-control{left:16px;bottom:18px;font-size:15px}.why{padding:65px 5%}.hello-mark{width:65px;height:65px;margin-bottom:24px}.big-copy{font-size:clamp(37px,8.8vw,63px);line-height:1.05}.why-bottom{display:block;margin-top:28px}.why-bottom p{font-size:18px;margin-bottom:30px}.underlined{font-size:16px}.personality{padding:55px 5% 65px}.personality-heading{display:block;margin-bottom:26px}h2{font-size:clamp(40px,9.6vw,68px)}.personality-heading p{font-size:18px;max-width:290px;margin-top:24px}.personality-picker{grid-template-columns:1fr;gap:30px}.choice-list button{padding:23px 0;font-size:21px;gap:12px}.choice-list button>span:first-child{width:17px;font-size:14px}.personality-result{min-height:350px;padding:30px;border-radius:8px 60px 8px 8px}.personality-result h3{font-size:38px}.personality-result p{font-size:17px}.community{grid-template-columns:1fr;padding:65px 5%;gap:35px}.community-photo{aspect-ratio:1.1;border-radius:8px 8px 8px 65px}.community-copy h2{font-size:clamp(40px,10vw,68px)}.community-copy p{font-size:18px;margin-top:23px;max-width:320px}.community-copy .eyebrow{margin-bottom:20px}.questions{grid-template-columns:1fr;gap:25px;padding:55px 5%}.questions h2{font-size:48px}summary{font-size:19px}details p{font-size:17px}.closing{padding:55px 5% 65px}.closing h2{font-size:clamp(45px,11.4vw,80px)}.closing>img{width:68px;height:68px}footer{padding:40px 5% 28px}.footer-logo{margin-bottom:40px}.footer-bottom{gap:20px;flex-wrap:wrap;font-size:14px}.footer-bottom p{flex-basis:100%}.footer-bottom>span{margin-left:auto}dialog{padding:40px 25px}.launch-film{padding:55px 5% 0}.launch-film h2{font-size:42px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal:not(.visible){opacity:1;transform:none}}
@media(min-width:2200px){header,.hero,.community,.launch-film{max-width:2800px}header{height:145px}.logo{width:245px}nav{font-size:22px;gap:50px}.button{font-size:22px;padding:20px 34px;min-height:65px}h1{font-size:220px}.hero-top p{font-size:28px}.hero-top{padding-bottom:70px}.hero-photo{aspect-ratio:2.25}.why{max-width:2500px;padding:140px 6%}.big-copy{font-size:130px;max-width:1900px}.why-bottom p{font-size:27px;max-width:700px}.underlined{font-size:24px}.personality{padding:115px max(5%,calc((100vw - 2450px)/2))}.personality-heading h2{font-size:112px}.personality-heading p{font-size:25px;max-width:350px}.personality-result{min-height:490px;padding:55px}.personality-result h3{font-size:68px;max-width:650px}.personality-result p{font-size:25px;max-width:600px}.choice-list button{font-size:38px}.community-copy h2{font-size:100px}.community-copy p{font-size:27px;max-width:500px}.questions{max-width:2500px}.questions h2{font-size:106px}summary{font-size:28px}details p{font-size:25px}.closing h2{font-size:150px}footer{padding-left:max(5%,calc((100vw - 2450px)/2));padding-right:max(5%,calc((100vw - 2450px)/2))}}