@charset "UTF-8";
@font-face{
  font-family:Roboto;
  src:url('assets/roboto-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:Roboto;
  src:url('assets/roboto-medium.ttf') format('truetype');
  font-style:normal;
  font-weight:500 700;
  font-display:swap
}
@font-face{
  font-family:Roboto;
  src:url('assets/roboto-black.ttf') format('truetype');
  font-style:normal;
  font-weight:800 900;
  font-display:swap
}
:root{
  color-scheme:light;
  --cream:#f9f0e7;
  --ink:#292332;
  --lavender:#a17cc7;
  --outline:#b89bcf;
  --pale:#dfcce8;
  --wall-cream:#fff9ef
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scrollbar-width:none
}
html::-webkit-scrollbar{display:none}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Roboto,Arial,Helvetica,sans-serif
}
a{
  color:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible{
  outline:3px solid #6d4c95;
  outline-offset:6px
}
.landing{
  position:relative;
  width:100%;
  aspect-ratio:2624/1632;
  container-type:inline-size;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at 51% 37%,#fcf4e9 0%,#f9efe5 48%,#f6eae2 100%)
}
.desk-light{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url('assets/desk-room-a-top.webp') center/100% 100% no-repeat
}
.scene-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  z-index:2
}
.content-stage{
  display:contents
}
.scene-layers{
  display:none
}
.desk-light::after{
  display:none
}
.brand{
  position:absolute;
  top:3.15%;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15cqw;
  z-index:3
}
.brand img{
  width:7.85%;
  height:auto;
  display:block
}
.brand p{
  font-size:.88cqw;
  margin:.6cqw 0 0;
  white-space:nowrap;
  letter-spacing:-.012em
}
.hero{
  position:absolute;
  inset:13.8% 0 auto;
  text-align:center;
  z-index:4
}
h1{
  margin:0;
  font-family:Roboto,Arial,Helvetica,sans-serif;
  font-size:5.05cqw;
  font-weight:900;
  letter-spacing:-.052em;
  line-height:1.04
}
h1>span{
  display:block;
  white-space:nowrap
}
h1>span+span{
  font-size:4.64cqw;
  margin-top:.37cqw
}
h1 em{
  display:inline-block;
  background:#d9c5e4;
  border-radius:5cqw;
  padding:.26cqw 1.85cqw .55cqw;
  font-style:normal;
  letter-spacing:-.055em;
  margin-right:.08cqw
}
.subtitle{
  font-size:1.56cqw;
  line-height:1.4;
  letter-spacing:-.023em;
  margin:1.03cqw 0 1.48cqw
}
.actions{
  display:flex;
  justify-content:center;
  gap:.95cqw
}
.button{
  font-family:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.9cqw;
  height:4.55cqw;
  padding:0 2.55cqw;
  border-radius:5cqw;
  text-decoration:none;
  font-size:1.42cqw;
  font-weight:400;
  white-space:nowrap;
  transition:background .18s,transform .18s,box-shadow .18s
}
.button:hover{
  transform:translateY(-2px);
  box-shadow:0 .4cqw 1.1cqw #77539020
}
.primary{
  color:#f9edf5;
  background:linear-gradient(115deg,#a07ac6,#9871bf);
  border:2px solid transparent
}
.primary:hover{
  background:#9169b9
}
.button-heart{
  display:inline-block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.1em;
  font-weight:900;
  line-height:1;
  transform:scaleX(1.04)
}
.secondary{
  border:.16cqw solid #a47ec5;
  background:#f4e7e550;
  color:#493551;
  min-width:16.2cqw
}
.secondary:hover{
  background:#eadbeb
}
.windows{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:.14cqw;
  width:1.65cqw;
  height:1.55cqw;
  transform:perspective(3cqw) rotateY(-12deg) skewY(-4deg)
}
.windows b{
  background:#f2e5f1
}
.product{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:51.75%;
  width:45.3%;
  aspect-ratio:16/9;
  z-index:3
}
.product-video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#f7f0e6;
  border:.14cqw solid #bfa5d0;
  border-radius:1.15cqw;
  box-shadow:0 .8cqw 2cqw #9477a52a,0 0 2.6cqw #d0add430
}
.modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px
}
.modal:target{
  display:flex
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:#47354b60;
  backdrop-filter:blur(8px)
}
.modal-card{
  position:relative;
  width:min(510px,100%);
  max-height:90dvh;
  overflow:auto;
  background:#fcf3e9;
  padding:42px;
  border:2px solid #c1a3d5;
  border-radius:28px;
  box-shadow:0 24px 100px #4c305b35
}
.close{
  position:absolute;
  right:22px;
  top:12px;
  color:#9773b5;
  font-size:32px;
  text-decoration:none
}
.modal-logo{
  width:110px;
  height:auto
}
.modal h2{
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.045em;
  margin:24px 0
}
.modal ol{
  padding-left:22px;
  font-size:16px;
  line-height:1.55
}
.modal li{
  padding-left:6px;
  margin-bottom:15px
}
.modal strong{
  color:#8260a0
}
.modal-note{
  font-size:13px;
  line-height:1.5;
  color:#806f88
}
.modal .button{
  font-size:16px;
  height:48px;
  padding:0 24px;
  margin-top:16px;
  gap:10px;
  border-width:2px
}
.download-card>p{
  line-height:1.6;
  color:#75667c
}
/* Adjacent slices of one room image meet at the desk's front edge. The top,
   bevel and mounts share one material and light source. Only the shallow
   furniture shadow fades into the solid cream feature wall. */
.cozy-wall{
  position:relative;
  isolation:isolate;
  background:var(--wall-cream);
  overflow:hidden
}
.shelf-underside{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:2;
  pointer-events:none
}
.shelf-underside img{
  display:block;
  width:100%;
  height:auto;
  mask-image:linear-gradient(#000 62%,transparent 100%)
}
.trailing-vines{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none
}
.vine{
  position:absolute;
  top:clamp(20px,2vw,45px);
  height:min(calc(100% - 95px),150vw);
  width:auto;
  max-height:none;
  object-fit:contain
}
.vine-left{left:clamp(6px,2.5vw,70px)}
.vine-right{right:clamp(6px,2.5vw,70px)}
.features-content{
  position:relative;
  z-index:4;
  width:min(1000px,68%);
  margin:0 auto;
  padding:clamp(150px,12vw,220px) 0 110px
}
.features-intro{
  text-align:center;
  margin:0 auto 90px
}
.eyebrow{
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9274a4
}
.features-intro .eyebrow{margin:0 0 18px}
.features-intro h2{
  margin:0;
  font-size:clamp(36px,3.4vw,56px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.045em
}
.features-intro>p:last-child{
  margin:22px 0 0;
  font-size:16px;
  line-height:1.6;
  color:#786d7d
}
.feature-list{
  display:grid;
  gap:72px
}
.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(28px,4.5vw,80px)
}
.feature-reverse .feature-picture{order:2}
.feature-picture{
  display:block;
  width:100%;
  height:auto
}
.picture-sage{background:#e9eddf;color:#8a9876}
.picture-peach{background:#f4e6da;color:#ba9684}
.picture-number{
  position:absolute;
  top:18px;
  left:20px;
  font-size:12px;
  letter-spacing:.08em;
  opacity:.8
}
.picture-symbol{
  position:relative;
  display:block;
  width:64px;
  height:51px;
  border:2px solid currentColor;
  border-radius:9px;
  overflow:hidden;
  opacity:.7
}
.picture-symbol::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border:2px solid currentColor;
  border-radius:50%;
  top:9px;
  right:10px
}
.picture-symbol::after,.picture-symbol i{
  content:"";
  position:absolute;
  display:block;
  width:33px;
  height:33px;
  border:2px solid currentColor;
  border-radius:5px;
  transform:rotate(45deg);
  top:28px;
  left:2px
}
.picture-symbol i{left:31px;top:32px}
.picture-caption{
  font-size:11px;
  letter-spacing:.045em
}
.feature-copy .eyebrow{margin:0 0 16px}
.feature-copy h3{
  font-size:clamp(25px,2.2vw,35px);
  line-height:1.13;
  letter-spacing:-.035em;
  margin:0 0 18px;
  font-weight:900
}
.feature-copy>p:last-child{
  margin:0;
  font-size:17px;
  line-height:1.6;
  color:#5f5662;
  max-width:370px
}
.waitlist-message{
  margin:0;
  padding:0;
  background:var(--wall-cream);
  text-align:center;
  font-size:clamp(24px,2.5vw,36px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.035em
}
.waitlist-cta{background:var(--wall-cream);text-align:center;padding:0 24px 80px}
.waitlist-cta>p{font-size:17px;font-weight:400;line-height:1.6;color:#5f5662;margin:18px 0 26px}
.waitlist-cta .button{font-size:20px;height:62px;padding:0 36px;gap:12px;border-radius:999px}
.waitlist-dialog{
  width:min(500px,calc(100% - 32px));max-height:90svh;overflow:auto;
  margin:auto;padding:40px;color:var(--ink);font-family:inherit;
  background:#fff8ef;border:2px solid #c1a3d5;border-radius:28px;
  box-shadow:0 24px 100px #4c305b35
}
.waitlist-dialog::backdrop{background:#47354b60;backdrop-filter:blur(8px)}
.waitlist-dialog{scrollbar-width:none}
.waitlist-dialog::-webkit-scrollbar{display:none}
body:has(.waitlist-dialog[open]){overflow:hidden}
.waitlist-dialog .close{border:0;background:none;cursor:pointer;font-family:inherit;line-height:1;padding:5px}
.waitlist-dialog .modal-logo{display:block;margin-bottom:28px}
.waitlist-dialog h2{font-size:34px;line-height:1.1;letter-spacing:-.045em;margin:0 0 16px;font-weight:900}
.waitlist-dialog>p{font-size:16px;line-height:1.6;color:#6b5d73;margin:0 0 25px}
.waitlist-dialog label{display:block;font-size:14px;font-weight:500;margin-bottom:9px}
.waitlist-dialog input{display:block;width:100%;padding:15px 17px;border:1.5px solid #c9b4d7;border-radius:13px;background:#fffdf8;color:var(--ink);font:inherit;font-size:16px;outline-offset:3px}
.waitlist-dialog input:focus-visible{outline:2px solid #9470b4;border-color:#9470b4}
.waitlist-dialog input::placeholder{color:#998b9e}
.waitlist-dialog input[aria-invalid="true"]{border-color:#a84660}
.waitlist-email-error{font-size:13px;line-height:1.5;color:#a03853;margin:8px 0 12px}
.waitlist-dialog .button{width:100%;height:52px;font-size:17px;padding:0 22px;gap:12px;margin-top:15px;border-radius:999px}
.waitlist-dialog .button:disabled{opacity:.65;cursor:wait}
.waitlist-dialog .button.is-joined:disabled{opacity:1;cursor:default}
.waitlist-disclaimer{font-size:12px;line-height:1.65;color:#786b80;margin:18px 0 0}
.waitlist-disclaimer a{text-underline-offset:3px}
.waitlist-status{font-size:13px;line-height:1.5;color:#77578f;margin:16px 0 0}
.waitlist-status:empty{display:none}
@media(max-width:699px){
  .waitlist-dialog{padding:30px 24px}
  .waitlist-dialog h2{font-size:30px}
  .waitlist-cta .button{font-size:17px;height:54px;width:auto}
}
.site-footer{
  background:var(--wall-cream);
  padding:0 clamp(20px,4.3vw,82px) 28px
}
.footer-card{
  max-width:1440px;
  margin:0 auto;
  background:#201e23;
  color:#faf4ec;
  padding:48px 54px 27px;
  border-radius:28px
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-bottom:38px
}
.footer-brand img{display:block;width:133px;height:auto}
.footer-brand p{
  font-size:14px;
  color:#c3b9c9;
  margin:14px 0 0
}
.footer-top nav{display:flex;gap:30px;flex-wrap:wrap}
.footer-top nav a{
  font-size:13px;
  color:#e6dfe8;
  text-decoration:none
}
.footer-card a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ffffff18;
  padding-top:24px;
  color:#a99eae;
  font-size:12px
}
.footer-bottom p{margin:0}
.footer-bottom a{text-decoration:none}
.footer-bottom span{margin-left:12px;color:#c7a5e2}
.legal-modal .modal-card>p:not(.eyebrow){font-size:16px;line-height:1.7;color:#75667c}
.legal-modal .eyebrow{margin-top:0}
.legal-modal .modal-card{width:min(700px,100%);scrollbar-width:none}
.legal-modal .modal-card::-webkit-scrollbar{display:none}
.legal-modal h3{font-size:19px;line-height:1.3;letter-spacing:-.02em;margin:26px 0 10px}
.legal-modal .modal-card>p{overflow-wrap:anywhere}
.policy-placeholder{color:#694b80;background:#e9dced70;padding:0 2px;border-radius:3px}
@media(min-width:700px) and (max-width:1100px){
  .vine-left{left:1vw}
  .vine-right{right:1vw}
  .features-content{width:68%;padding-bottom:90px}
  .features-intro{margin-bottom:65px}
  .feature-list{gap:58px}
  .feature-copy>p:last-child{font-size:16px}
  .feature-copy .eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:10px}
  .feature-copy h3{font-size:26px;margin-bottom:13px}
  .footer-card{padding:38px 34px 25px}
  .footer-top{align-items:flex-start;gap:35px}
  .footer-top nav{flex-direction:column;gap:17px}
}
@media(max-width:699px){
  .features-content{width:76%;padding:130px 0 65px}
  .features-intro{margin-bottom:42px}
  .features-intro h2{font-size:34px}
  .features-intro>p:last-child{font-size:14px}
  .features-intro .eyebrow{font-size:9px;letter-spacing:.12em}
  .feature-row{grid-template-columns:1fr;gap:25px}
  .feature-reverse .feature-picture{order:0}
  .feature-list{gap:48px}
  .feature-copy h3{font-size:28px}
  .feature-copy>p:last-child{font-size:16px}
  .vine{width:50px;height:auto;max-height:none;top:20px}
  .vine-left{left:-18px}
  .vine-right{right:-18px}
  .footer-card{padding:34px 27px 26px;border-radius:22px}
  .footer-top,.footer-bottom{align-items:flex-start;flex-direction:column}
  .footer-top nav{gap:18px 24px}
  .footer-bottom{gap:18px;line-height:1.7}
}
/* Fit the central content to the usable viewport. Edge artwork is independent
   so the books, laptop and notebook are cropped only by the screen boundary. */
@media(min-width:700px){
  body{
    min-height:100svh;
    background:var(--cream)
  }
  .landing{
    --scene-width:min(100vw,calc(100svh * 2624 / 1632),2624px);
    --scene-height:calc(var(--scene-width) * 1632 / 2624);
    width:100%;
    height:100svh;
    aspect-ratio:auto;
    container-type:normal;
    background:none
  }
  .content-stage{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:var(--scene-width);
    height:var(--scene-height);
    container-type:inline-size;
    z-index:3
  }
  .scene-art{
    display:none
  }
  .scene-layers{
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none
  }
  .scene-layer{
    display:block;
    position:absolute;
    height:auto
  }
  .wall-left{
    top:0;
    left:0;
    width:calc(var(--scene-width) * .28)
  }
  .wall-right{
    top:0;
    right:0;
    width:calc(var(--scene-width) * .18)
  }
  .desk-books{
    bottom:calc(var(--scene-width) * .045);
    left:0;
    width:calc(var(--scene-width) * .17);
    filter:drop-shadow(0 .25vw .4vw #654a6b16)
  }
  .desk-mug{
    bottom:calc(var(--scene-width) * .018);
    /* The centered video starts at 50% - .2265 of the content width.
       Reserve the whole .12-wide cup plus a visible gap to its left. */
    left:min(calc(var(--scene-width) * .18),calc(50% - var(--scene-width) * .3465 - 32px));
    width:calc(var(--scene-width) * .12);
    filter:drop-shadow(0 .35vw .35vw #654a6b22)
  }
  .desk-right{
    bottom:0;
    right:0;
    width:calc(var(--scene-width) * .32)
  }
}
@media(max-width:699px){
  .landing{
    aspect-ratio:auto;
    min-height:920px;
    min-height:max(920px,100svh)
  }
  .scene-art{
    height:100%;
    width:160%;
    left:-30%;
    object-fit:cover;
    object-position:center
  }
  .brand{
    top:30px;
    gap:10px;
    flex-direction:column
  }
  .brand img{
    width:105px
  }
  .brand p{
    font-size:10px;
    margin:0
  }
  .hero{
    top:160px;
    padding:0 20px
  }
  h1{
    font-size:clamp(29px,7.6cqw,54px);
    line-height:1.08;
    letter-spacing:-.055em
  }
  h1>span+span{
    font-size:clamp(29px,7.6cqw,54px);
    white-space:normal;
    max-width:600px;
    margin:9px auto 0
  }
  h1 em{
    padding:3px 12px 6px;
    border-radius:100px;
    margin-bottom:5px
  }
  .subtitle{
    font-size:16px;
    max-width:360px;
    line-height:1.45;
    margin:20px auto 24px
  }
  .actions{
    flex-direction:column;
    align-items:center;
    gap:12px
  }
  .button{
    font-size:16px;
    gap:12px;
    height:50px;
    border-radius:40px;
    padding:0 26px;
    width:255px
  }
  .secondary{
    border-width:2px
  }
  .windows{
    width:19px;
    height:18px;
    gap:2px;
    transform:skewY(-4deg)
  }
  .product{
    top:555px;
    left:50%;
    width:84%;
    height:auto;
    aspect-ratio:16/9
  }
  .product-video{
    border-width:1.5px;
    border-radius:12px
  }
  .modal-card{
    padding:32px 27px
  }
  .modal h2{
    font-size:30px
  }
  .modal .button{
    width:auto
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  .button{
    transition:none
  }
}
.mobile-decoration{
  display:none
}
@media(max-width:699px){
  .mobile-decoration{
    display:block;
    position:absolute;
    z-index:2;
    pointer-events:none;
    height:auto;
    opacity:.85
  }
  .mobile-keychain{
    top:0;
    left:-8px;
    width:75px
  }
  .mobile-moon{
    top:76px;
    right:5px;
    width:64px
  }
}
/* Optical matching to the typography in the supplied composition. */ @media(min-width:700px){
  h1{
    font-size:5.3cqw;
    line-height:1;
    letter-spacing:-.035em
  }
  h1>span+span{
    font-size:4.85cqw;
    margin-top:0
  }
  h1 em{
    padding:.26cqw 1.3cqw .4cqw;
    letter-spacing:-.045em
  }
  .subtitle{
    font-size:1.6cqw;
    letter-spacing:0;
    margin-top:.4cqw;
    margin-bottom:1.48cqw
  }
}