/* Landing-page sections and the paper walkthrough. */
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}
.section-heading h2,.faq-intro h2{font:clamp(44px,4.5vw,66px)/1.02 InstrumentSerif,serif;letter-spacing:-1px;margin-top:18px}
.section-heading>p{font-size:21px;line-height:1.4;max-width:355px;color:#ffffffdc}
.section-collection{padding-top:70px;padding-bottom:76px;border-top:1px solid #ffffff40}
.collection-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sample{display:block;min-width:0;background:#fff;color:#242424;padding:12px 12px 18px;border-radius:2px;box-shadow:3px 6px 0 #00000030;text-decoration:none}
.sample:hover{text-decoration:none}.sample:hover h3{text-decoration:underline;text-underline-offset:4px}
.sample:nth-child(1){transform:rotate(-1.5deg)}.sample:nth-child(3){transform:rotate(1.5deg)}
.sample-image{height:260px;overflow:hidden;background:#efefef}.sample-image img{height:100%;width:100%;object-fit:cover}.sample-object img{object-fit:contain}
.sample-caption{display:flex;justify-content:space-between;gap:10px;padding:16px 5px 0}.sample-kind{font-size:11px;letter-spacing:1px;color:#6b6b6b}
.sample h3{font:28px/1.05 InstrumentSerif,serif;margin:8px 0 6px}.sample-caption p{font-size:16px;color:#646464}.sample-caption>span{font-size:27px;color:#242424}
.collection-credit{font-size:13px;color:#ffffffb0;margin-top:25px}
.section-how{max-width:1280px;margin:0 auto 76px;padding:52px 60px 34px;background:#fff;color:#242424;border-radius:5px;box-shadow:0 5px 20px #00000026}
.section-how .eyebrow{color:#5c5c5c}.section-how .section-heading{margin-bottom:44px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;list-style:none;padding:0;margin:0}
.steps li{border-top:1px solid #24242440;padding-top:20px}.step-number{font:22px InstrumentSerif,serif;color:#242424}
.steps h3{font:30px/1.06 InstrumentSerif,serif;margin:22px 0 14px;letter-spacing:-.3px}.steps p{font-size:19px;line-height:1.45;color:#595959;max-width:305px}
.how-note{font-size:13px;color:#777777;margin-top:36px;padding-top:20px;border-top:1px solid #24242415}
.section-faq{max-width:1350px;margin:auto;padding:0 70px 85px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;scroll-margin-top:30px}
.faq-intro>p:last-child{font-size:19px;line-height:1.45;margin-top:28px;color:#ffffffd9}.faq-intro a{display:inline-block;margin-top:8px;text-decoration:underline;text-underline-offset:5px}
.faq-list{border-top:1px solid #ffffff60}.faq-list details{border-bottom:1px solid #ffffff60}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:23px;line-height:1.25;padding:24px 0}
.faq-list summary::-webkit-details-marker{display:none}.faq-toggle{font:29px/1 InstrumentSerif,serif;flex:none}.faq-list details[open] .faq-toggle{transform:rotate(45deg)}
.faq-list details>p{font-size:19px;line-height:1.5;color:#ffffffda;max-width:520px;padding:0 35px 25px 0}.faq-list summary:focus-visible{outline:2px solid #fff;outline-offset:5px}
#collection,#how-it-works,#faq{scroll-margin-top:30px}
@media(max-width:1350px){.section-how{margin-inline:32px;padding:48px 38px 30px}}
@media(max-width:1000px){.section-heading{align-items:flex-start;flex-direction:column;gap:20px}.collection-samples{gap:18px}.sample-image{height:220px}.steps{gap:26px}.steps h3{font-size:27px}.section-faq{gap:40px;padding-inline:45px}.section-how{padding-inline:32px}}
@media(max-width:760px){.section-collection{padding:48px 26px 52px}.section-heading{margin-bottom:28px}.section-heading h2,.faq-intro h2{font-size:47px}.section-heading>p{font-size:20px}.collection-samples{grid-template-columns:1fr;gap:25px}.sample-image{height:260px}.sample:nth-child(n){transform:none}.sample h3{font-size:30px}.sample-caption p{font-size:17px}.section-how{margin:0 16px 52px;padding:32px 24px 24px}.section-how .section-heading{margin-bottom:30px}.steps{grid-template-columns:1fr;gap:26px}.steps h3{font-size:31px;margin:12px 0}.steps p{max-width:none}.how-note{margin-top:28px;line-height:1.5}.section-faq{grid-template-columns:1fr;padding:0 26px 52px;gap:30px}.faq-intro>p:last-child{margin-top:20px}.faq-list summary{font-size:22px;padding:22px 0}.faq-list details>p{padding-right:10px}.section-heading h2 br{display:none}}

/* A full-width sheet of textured paper beneath the collection. */
.section-collection{
  --tear-height:32px;
  position:relative;
  isolation:isolate;
  max-width:none;
  border-top:0;
  margin-bottom:64px;
  padding:54px max(70px,calc((100% - 1210px)/2)) 90px;
  color:#242424;
}
.section-collection::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:#f2f0e9 url('assets/paper-texture.png') center top/1440px auto repeat;
  -webkit-mask-image:url('assets/paper-tear-top.svg'),linear-gradient(#000,#000),url('assets/paper-tear-bottom.svg');
  mask-image:url('assets/paper-tear-top.svg'),linear-gradient(#000,#000),url('assets/paper-tear-bottom.svg');
  -webkit-mask-size:100% var(--tear-height),100% calc(100% - var(--tear-height)*2 + 2px),100% var(--tear-height);
  mask-size:100% var(--tear-height),100% calc(100% - var(--tear-height)*2 + 2px),100% var(--tear-height);
  -webkit-mask-position:center top,center center,center bottom;
  mask-position:center top,center center,center bottom;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.section-collection .eyebrow{color:#5c5c5c}
.section-collection .section-heading{margin-bottom:24px}
.section-collection .section-heading h2{margin-top:12px}
.section-collection .section-heading>p{color:#535353}
.section-collection .collection-credit{color:#666666}
.section-collection .sample{box-shadow:2px 5px 9px #24242424}
@media(max-width:1100px){.section-collection{padding-inline:45px}}
@media(max-width:760px){
  .section-collection{--tear-height:24px;padding:44px 26px 60px;margin-bottom:40px}
}

/* Three app screens with the approved taste-led walkthrough. */
.how-preview .section-heading{margin-bottom:32px}
.how-preview-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0}
.how-preview-steps>li{min-width:0}
.how-phone{width:100%;max-width:360px;margin:0 auto;padding:5px;border:1px solid #777;border-radius:46px;background:#191919;box-shadow:0 18px 30px #24242430,0 3px 5px #24242440}
.how-phone img{width:100%;height:auto;aspect-ratio:1206/2622;border-radius:40px}
.how-caption{max-width:360px;margin:26px auto 0;text-align:center}
.how-step-number{font-size:14px;letter-spacing:2px;color:#505050}
.how-caption h3{font:400 clamp(29px,2.6vw,36px)/1.08 InstrumentSerif,serif;letter-spacing:-.4px;margin:12px 0 14px;min-height:0;text-wrap:balance}
.how-caption p{font-size:20px;line-height:1.45;color:#383838;max-width:330px;margin-inline:auto;text-wrap:pretty}
@media(min-width:761px) and (max-width:1100px){.how-preview-steps{gap:30px}.how-phone{padding:4px;border-radius:30px}.how-phone img{border-radius:25px}}
/* Keep the complete desktop walkthrough within a typical laptop viewport. */
@media(min-width:761px){
  .how-preview{padding-top:38px;padding-bottom:44px}
  .how-preview .section-heading,.how-preview-steps{max-width:1060px;margin-inline:auto}
  .how-preview .section-heading{margin-bottom:20px}
  .how-preview .section-heading h2{font-size:48px;margin-top:8px}
  .how-phone{max-width:clamp(160px,calc((100svh - 390px) * .46),300px);padding:4px;border-radius:34px}
  .how-phone img{border-radius:29px}
  .how-caption{max-width:320px;margin-top:18px}
  .how-step-number{font-size:14px}
  .how-caption h3{font-size:clamp(28px,2.3vw,34px);margin:8px 0 12px}
  .how-caption p{font-size:20px;line-height:1.45;max-width:none}
}
@media(max-width:760px){
  .how-preview .section-heading{margin-bottom:32px}
  .how-preview-steps{grid-template-columns:1fr;gap:48px}
  .how-preview-steps>li{width:100%;max-width:360px;margin:auto}
  .how-caption{margin-top:26px}
  .how-caption h3{font-size:34px;min-height:0;text-wrap:initial;margin:12px 0}
  .how-caption p{max-width:none}
}

/* A simple closing invitation, after the FAQ. */
.how-preview{margin-bottom:0;z-index:1}
.film-grain-bottom{
  position:relative;
  isolation:isolate;
  overflow:clip;
  margin-top:-32px;
  padding-top:96px;
  background:radial-gradient(ellipse at 50% 35%,#090909 0%,#030303 75%);
}
.film-grain-bottom::before{
  content:"";
  position:absolute;
  inset:-100px;
  z-index:-1;
  pointer-events:none;
  background:url('assets/film-grain.svg') repeat;
  background-size:220px 220px;
  mix-blend-mode:screen;
  opacity:.24;
  animation:film-grain-shift 1s steps(1,end) infinite;
}
@keyframes film-grain-shift{
  0%,100%{transform:translate(0,0)}
  12.5%{transform:translate(-37px,21px)}
  25%{transform:translate(18px,-43px)}
  37.5%{transform:translate(-53px,-16px)}
  50%{transform:translate(42px,35px)}
  62.5%{transform:translate(-12px,57px)}
  75%{transform:translate(61px,-28px)}
  87.5%{transform:translate(-46px,49px)}
}
@media(max-width:760px){.film-grain-bottom{margin-top:-24px;padding-top:64px}}
@media(prefers-reduced-motion:reduce){.film-grain-bottom::before{animation:none}}

/* The user's taste quote and one fixed pair of previews. */
.archive-showcase{max-width:1210px;margin:0 auto 100px;padding:30px 45px 100px;border-bottom:1px solid #ffffff30;text-align:center;scroll-margin-top:35px}
.archive-showcase>.eyebrow{color:#b9b9b9;letter-spacing:2px}
.taste-quote{max-width:960px;margin:30px auto 48px;font:400 clamp(36px,4.1vw,58px)/1.13 InstrumentSerif,serif;letter-spacing:-.7px;text-wrap:balance}
.quote-opening{display:block;margin-bottom:18px;color:#fff}
.taste-quote .quote-attribution{font:400 19px/1.4 Narrow,'Arial Narrow',sans-serif;letter-spacing:0;color:#b9b9b9}
.taste-quote em{font-weight:400}
.archive-screen-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:34px;max-width:740px;margin:0 auto;padding-bottom:64px}
.showcase-phone{min-width:0;padding:5px;border:1px solid #888;border-radius:46px;background:#191919;box-shadow:0 22px 48px #0009,0 0 0 2px #ffffff0a}
.showcase-phone:nth-child(2){transform:translateY(64px)}
.showcase-phone img{display:block;width:100%;height:auto;aspect-ratio:1206/2622;border-radius:40px}
@media(max-width:760px){
  .archive-showcase{margin:0 26px 58px;padding:16px 0 58px}
  .taste-quote{font-size:clamp(32px,7.9vw,48px);line-height:1.15;letter-spacing:-.4px;margin:24px auto 32px}
  .quote-opening{margin-bottom:14px}
  .archive-screen-pair{gap:14px;padding-bottom:32px}
  .showcase-phone{padding:3px;border-radius:24px}
  .showcase-phone img{border-radius:19px}
  .showcase-phone:nth-child(2){transform:translateY(32px)}
}

.closing-cta{max-width:1210px;margin:0 auto;padding:90px 26px 110px;border-top:1px solid #ffffff40;text-align:center;scroll-margin-top:30px}
.closing-cta h2{font:clamp(48px,5.5vw,80px)/1.05 InstrumentSerif,serif;letter-spacing:-1.5px;margin:0}
.closing-cta h2 em{font-style:italic;font-weight:400}
.get-started-button{display:inline-flex;align-items:center;justify-content:center;gap:32px;margin-top:34px;padding:15px 28px;min-height:56px;border:1px solid #ffffff80;border-radius:5px;background:#fff;color:#242424;font:20px Narrow,'Arial Narrow',sans-serif;cursor:pointer;box-shadow:3px 5px 0 #00000030}
.get-started-button span{font:27px/1 InstrumentSerif,serif}
.get-started-button:hover{background:#f2f0e9}
.get-started-button:focus-visible,.start-dialog button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.closing-caption{margin-top:21px;color:#ffffffc0;font-size:15px}
.start-dialog{width:calc(100% - 40px);max-width:420px;padding:38px 30px 30px;border:0;border-radius:6px;background:#fff;color:#242424;box-shadow:0 15px 65px #0005}
.start-dialog::backdrop{background:#000000b3}
.start-dialog .eyebrow{color:#5c5c5c}
.start-dialog h2{font:38px/1.05 InstrumentSerif,serif;margin:20px 0 16px}
.start-dialog>p:last-of-type{font-size:19px;line-height:1.4;color:#555555}
.dialog-close{position:absolute;right:12px;top:8px;width:40px;height:40px;background:none;border:0;color:#5c5c5c;font:28px Narrow,sans-serif;cursor:pointer}
.dialog-done{margin-top:28px;padding:12px 24px;min-height:44px;border:0;border-radius:4px;background:#242424;color:white;font:18px Narrow,sans-serif;cursor:pointer}
@media(max-width:1350px){.closing-cta{margin-inline:45px}}
@media(max-width:760px){.closing-cta{margin-inline:26px;padding:60px 0 70px}.closing-cta h2{font-size:clamp(38px,10vw,54px);letter-spacing:-.7px}.get-started-button{margin-top:28px}.closing-caption{font-size:14px}}

/* Closing message on the user's torn-paper note. */
.closing-cta{border-top:0;padding:30px 26px 90px;perspective:1200px}
.closing-note{width:100%;max-width:780px;min-height:530px;margin:auto;padding:110px 48px 100px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('assets/outro-note-v3.png') center/100% 100% no-repeat;color:#242424;filter:drop-shadow(4px 12px 9px #00000045)}
.closing-note{transform:rotateX(var(--note-rotate-x,0deg)) rotateY(var(--note-rotate-y,0deg)) translateY(var(--note-lift,0px));transition:transform .28s ease-out}
.closing-note.is-tilting{transition:transform .12s ease-out;will-change:transform}
@media(prefers-reduced-motion:reduce){.closing-note,.closing-note.is-tilting{transform:none;transition:none;will-change:auto}}
.closing-note h2{font-size:clamp(40px,4.8vw,66px);letter-spacing:-1px}
.closing-note .get-started-button{display:inline-flex;width:min(100%,230px);min-height:60px;padding:12px 18px;margin-top:30px;border:0;border-radius:9px;background:#000;color:#fff;box-shadow:none;font:22px/1.2 Narrow,'Arial Narrow',sans-serif;white-space:nowrap}
.closing-note .get-started-button:hover{background:#242424}
.closing-note .get-started-button:hover{text-decoration:none}
.closing-note .closing-caption{margin-top:20px;color:#626262}
@media(max-width:760px){
  .closing-cta{margin-inline:16px;padding:10px 0 60px}
  .closing-note{min-height:350px;padding:112px 20px 54px}
  .closing-note h2{font-size:clamp(28px,7.8vw,45px);letter-spacing:-.5px}
  .closing-note .get-started-button{margin-top:24px}
  .closing-note .get-started-button{min-height:0}
  .closing-note .closing-caption{font-size:12px;margin-top:18px}
}

/* Waitlist dialog, opened by every Join the waitlist link. */
.waitlist-dialog{max-width:460px;padding:40px 32px 30px}
.waitlist-step>p:not(.eyebrow){font-size:19px;line-height:1.4;color:#555}
.waitlist-step strong{color:#242424;font-weight:400;overflow-wrap:anywhere}
.waitlist-form{margin-top:24px}
.waitlist-dialog{max-height:calc(100dvh - 32px);overflow:auto}
.waitlist-label{display:block;margin-bottom:8px;padding:0;font-size:13px;letter-spacing:1.1px;text-transform:uppercase;color:#5c5c5c}
.waitlist-field input{width:100%;min-height:48px;padding:0 14px;border:1px solid #24242455;border-radius:4px;background:#fff;color:#101010;font:18px Narrow,'Arial Narrow',sans-serif}
.waitlist-field input::placeholder{color:#8a8a8a}
.waitlist-field input:focus-visible{outline:2px solid #101010;outline-offset:2px;border-color:#101010}
.waitlist-field input[aria-invalid="true"]{border-color:#8a1f1f}
.waitlist-message{min-height:1.4em;margin:6px 0 8px;font-size:15px;color:#8a1f1f}
.waitlist-submit{width:100%;min-height:50px;margin-top:22px;padding:0 18px;border:0;border-radius:4px;background:#000;color:#fff;font:19px Narrow,'Arial Narrow',sans-serif;cursor:pointer}
.waitlist-submit:hover{background:#242424}
.waitlist-submit:focus-visible{outline:2px solid #101010;outline-offset:3px}
.waitlist-submit:disabled{opacity:.6;cursor:progress}
.waitlist-fine{margin-top:12px;font-size:14px!important;color:#707070!important}
.waitlist-fine a{text-decoration:underline;text-underline-offset:3px}
.waitlist-done h2:focus{outline:none}
@media(max-width:480px){.waitlist-dialog{padding:36px 22px 24px}}

.product-preview-note{max-width:480px;margin-top:14px;font-size:17px;line-height:1.4;color:#555}