@font-face{font-family:BSans;src:url(/fonts/BuilderSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:BSans;src:url(/fonts/BuilderSans-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:BSerif;src:url(/fonts/BuilderSerif-Regular.ttf) format("truetype");font-weight:400;font-display:swap}

:root{
  --ink:#1E1F21;        /* the app's charcoal buttons */
  --ink-2:#5F6062;      /* wordmark grey */
  --paper:#F4F2EC;      /* warm off-white, like the app's sheets */
  --paper-2:#EAE6DC;
  --night:#14130F;
  --line:rgba(30,31,33,.12);
  --sans:BSans,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --serif:BSerif,"Iowan Old Style",Georgia,serif;
  --r:28px;
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;text-wrap:balance;margin:0}
h1,h2{font-family:var(--serif);letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(36px,5.2vw,64px)}
h3{font:500 21px/1.25 var(--sans);letter-spacing:-.01em}
p{margin:0}
.eyebrow{font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:999px;font:500 17px/1 var(--sans);padding:18px 28px;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease}
.btn:active{transform:scale(.98)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#F1EEE6}
.btn-sm{font-size:15px;padding:11px 18px}

/* nav: a floating pill */
.nav{position:fixed;z-index:20;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 2*var(--gut)));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 18px;border-radius:999px;color:#fff;transition:background .25s ease,box-shadow .25s ease,color .25s ease}
.nav.solid{background:rgba(20,19,15,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:500 24px/1 var(--sans);letter-spacing:-.04em}
.brand img{height:24px;width:auto;transform:rotate(33deg)}
.links{display:flex;gap:28px}
.links a{font-size:15px;text-decoration:none;opacity:.82}
.links a:hover{opacity:1}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:120px var(--gut) 110px;color:#fff;text-align:center;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:-4%;background:linear-gradient(180deg,rgba(20,19,15,.45) 0%,rgba(20,19,15,.12) 40%,rgba(20,19,15,.55) 100%),url(/img/hero-bg.jpg) center/cover;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.08) translate(-1.5%,1%)}}
.hero-inner{position:relative;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero h1{font-size:clamp(48px,8.4vw,104px)}
.lede{max-width:560px;font-size:clamp(17px,1.6vw,19px);color:rgba(255,255,255,.82)}
.avail{font-size:14px;color:rgba(255,255,255,.7)}
.avail strong{font-weight:500;color:#fff}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:14px;text-decoration:none;padding:10px 16px;border-radius:999px;background:rgba(20,19,15,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* waitlist form */
.join{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:520px}
.join input{flex:1 1 240px;min-width:0;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:400 17px/1 var(--sans);padding:17px 22px;border-radius:999px;outline:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.join input::placeholder{color:rgba(255,255,255,.62)}
.join input:focus{border-color:#fff;background:rgba(255,255,255,.18)}
.join .btn{flex:0 0 auto}
.join-msg{flex-basis:100%;min-height:1.4em;font-size:15px;color:rgba(255,255,255,.85)}
.join.done input,.join.done .btn{display:none}

/* phone frame */
.phone{position:relative;aspect-ratio:860/1869;max-width:100%;border-radius:clamp(26px,3.2vw,40px);overflow:hidden;background:#000;box-shadow:0 0 0 8px #0E0E0C,0 30px 60px -20px rgba(20,19,15,.45)}
.phone img,.phone video{width:100%;height:100%;object-fit:cover}

/* film */
.film{display:grid;grid-template-columns:1fr minmax(0,360px);align-items:center;gap:clamp(32px,7vw,110px);max-width:1080px;margin:0 auto;padding:clamp(80px,12vw,150px) var(--gut)}
.film-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.film-copy p:not(.eyebrow){color:var(--ink-2);font-size:19px}
.phone-video{aspect-ratio:9/16;margin-inline:8px}
.sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:500 15px/1 var(--sans);padding:12px 18px;cursor:pointer;white-space:nowrap}
.sound[hidden]{display:none}

/* how */
.how{background:var(--paper-2);padding:clamp(80px,11vw,140px) var(--gut);text-align:center}
.how h2{max-width:760px;margin:0 auto}
.steps{list-style:none;margin:clamp(48px,6vw,80px) auto 0;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);text-align:left}
.steps li{display:flex;flex-direction:column;gap:12px;min-width:0}
.steps .phone{width:min(100%,280px);margin:0 auto 22px}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:500 14px/1 var(--sans)}
.steps p{color:var(--ink-2)}

/* app rail */
.app{padding:clamp(80px,11vw,140px) 0}
.app-head{padding:0 var(--gut);max-width:1180px;margin:0 auto}
.rail{display:flex;gap:clamp(18px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;padding:48px max(var(--gut),calc((100% - 1180px)/2)) 30px;scrollbar-width:none;outline:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:center;display:flex;flex-direction:column;gap:18px}
.rail .phone{margin:8px}
.rail figcaption{font:500 16px/1.3 var(--sans);text-align:center}

/* faq */
.faq{max-width:820px;margin:0 auto;padding:clamp(60px,9vw,120px) var(--gut)}
.faq h2{margin-bottom:36px}
.qs{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:500 19px/1.35 var(--sans)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--ink-2);transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 26px;color:var(--ink-2);max-width:640px}

/* closing */
.close{padding:0 var(--gut) clamp(40px,6vw,80px)}
.close-card{position:relative;overflow:hidden;max-width:1180px;margin:0 auto;border-radius:var(--r);padding:clamp(70px,10vw,130px) var(--gut);color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;background:linear-gradient(180deg,rgba(20,19,15,.25),rgba(20,19,15,.65)),url(/img/hero-bg.jpg) center 70%/cover}
.lockup{display:flex;align-items:center;gap:14px;font:500 clamp(44px,6vw,64px)/1 var(--sans);letter-spacing:-.045em}
.lockup img{height:clamp(56px,7.6vw,80px);width:auto;transform:rotate(33deg)}
.close-card h2{font-size:clamp(34px,4.6vw,56px)}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1180px;margin:0 auto;padding:28px var(--gut) calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--ink-2)}

@media (max-width:820px){
  .links{display:none}
  .film{grid-template-columns:1fr;text-align:center}
  .film-copy{align-items:center}
  .phone-video{width:min(100%,320px);margin:0 auto}
  .steps{grid-template-columns:1fr;max-width:420px}
  .steps .phone{width:min(78%,260px)}
}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}html{scroll-behavior:auto}}
.hero h1,.lede,.avail{text-shadow:0 1px 24px rgba(20,19,15,.35)}