:root{
  --linen:#ECE4D4; --paper:#F5EFE6; --ink:#2D2418; --ink-soft:#6B5D4A;
  --sienna:#94432E; --sienna-dk:#7a3625; --line:#D4C5AE; --sage:#3C6E47;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--linen); color:var(--ink); font-family:var(--sans); font-weight:300;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 90% 45% at 50% -6%, rgba(148,67,46,.09), transparent 70%);
  background-attachment:fixed;}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px}
.narrow{max-width:720px; margin:0 auto}

/* nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(236,228,212,.82); border-bottom:0.5px solid var(--line)}
.nav-in{max-width:1080px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img{width:36px; height:36px; border-radius:50%; display:block; flex:none}
.brand span{font-family:var(--serif); font-weight:500; font-size:14px; letter-spacing:.36em; text-transform:uppercase; color:var(--sienna)}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{font-size:14px; letter-spacing:.02em; text-decoration:none; color:var(--ink-soft)}
.nav-links a:hover, .nav-links a.active{color:var(--ink)}
@media (max-width:640px){ .nav-links a.link{display:none} .nav-in{padding:12px 20px} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans);
  font-size:15px; letter-spacing:.02em; border:none; border-radius:12px; cursor:pointer; text-decoration:none;
  padding:13px 22px; transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:#1f1810}
.btn-sienna{background:var(--sienna); color:#F5EFE6 !important}
.btn-sienna:hover{background:var(--sienna-dk); color:#F5EFE6 !important}
.btn-ghost{background:transparent; color:var(--ink); border:0.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-sm{padding:10px 16px; font-size:14px; border-radius:10px}

/* coming-soon app store button (compliant: not the official badge) */
.appstore{display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:var(--paper);
  border-radius:13px; padding:11px 18px; text-decoration:none}
.appstore svg{width:22px; height:22px; fill:var(--paper); flex:none}
.appstore .a1{font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; line-height:1.1}
.appstore .a2{font-family:var(--serif); font-size:19px; line-height:1.05}

/* type + sections */
h1,h2,h3{font-family:var(--serif); font-weight:400}
section{padding:76px 0}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sienna); margin:0 0 20px}
.rule{height:0.5px; background:var(--line); border:none; margin:0}
.prose{font-size:20px; line-height:1.68; max-width:34em}
.prose em{font-style:italic; color:var(--sienna)}

/* hero */
.hero{padding:84px 0 72px}
.hero h1{font-size:clamp(50px,9vw,86px); line-height:1.02; letter-spacing:-0.01em; margin:0 0 24px}
.hero .lede{font-size:20px; color:var(--ink-soft); max-width:30em; margin:0 0 32px}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.coming{display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--sage); display:inline-block}

/* image bands */
.bleed{position:relative; width:100%; overflow:hidden}
.bleed>img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--obj-pos,center)}
.band{height:clamp(360px,50vh,520px)}
.scrim{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(rgba(30,24,16,.48),rgba(30,24,16,.48))}
.scrim-inner{max-width:760px; padding:40px 28px}
.on-photo{color:var(--paper)}
.on-photo h2{font-size:clamp(30px,5vw,50px); line-height:1.08; margin:0}

/* split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split .ph{border-radius:20px; overflow:hidden; border:0.5px solid var(--line); align-self:stretch}
.split .ph img{display:block; width:100%; height:100%; object-fit:cover; max-height:540px}
.assure{font-family:var(--serif); font-size:clamp(25px,3.2vw,32px); line-height:1.34}
.assure span{color:var(--sienna)}
@media (max-width:760px){ .split{grid-template-columns:1fr; gap:26px} }
.split.problem{grid-template-columns:1.1fr .9fr}
.split.problem .ph{align-self:center}
.split.problem .ph img{height:auto; max-height:none; object-fit:unset}

/* figure */
.figure{border-radius:20px; overflow:hidden; border:0.5px solid var(--line); margin-top:36px}
.figure img{display:block; width:100%; height:auto}

/* how it works cards */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:12px}
@media (max-width:760px){ .steps3{grid-template-columns:1fr; gap:32px} }
.stepcard{background:var(--paper); border:0.5px solid var(--line); border-radius:20px; overflow:hidden}
.stepcard .img{aspect-ratio:4/3; overflow:hidden}
.stepcard .img img{width:100%; height:100%; object-fit:cover; display:block}
.stepcard .body{padding:22px 22px 26px}
.stepcard .num{font-family:var(--serif); font-size:15px; letter-spacing:.1em; color:var(--sienna); text-transform:uppercase}
.stepcard h3{font-size:24px; margin:6px 0 8px}
.stepcard p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.6}

/* waitlist */
.signup{
  background-image:linear-gradient(rgba(20,16,10,.74), rgba(20,16,10,.74)), url('images/banner.jpg');
  background-size:cover; background-position:center;
  border:0.5px solid rgba(212,197,174,.28); border-radius:24px;
  padding:46px 40px; max-width:560px; margin:0 auto; color:var(--paper);
}
.signup h2{font-size:34px; margin:0 0 8px; color:var(--paper)}
.signup .sub{color:rgba(245,239,230,.82); font-size:16px; margin:0 0 26px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,239,230,.72); margin:0 0 7px}
.field .opt{text-transform:none; letter-spacing:0; font-style:italic}
.field input{width:100%; padding:14px 15px; border:0.5px solid var(--line); border-radius:12px; background:#fff; font-family:var(--sans); font-size:16px; color:var(--ink)}
.field input:focus{outline:2px solid var(--sienna); outline-offset:1px; border-color:transparent}
#joinBtn{width:100%; margin-top:8px}
.msg{min-height:22px; margin-top:14px; font-size:14px}
.msg.err{color:var(--sienna)} .msg.ok{color:var(--sage)}
.done{text-align:center; padding:12px 0}
.done .check{width:52px; height:52px; border-radius:50%; background:var(--sage); display:flex; align-items:center; justify-content:center; margin:0 auto 16px}
.done .check svg{width:26px; height:26px; stroke:#fff; stroke-width:2.4; fill:none}
.hidden{display:none!important}

/* faq */
.faq details{border-bottom:0.5px solid var(--line); padding:6px 0}
.faq summary{cursor:pointer; list-style:none; padding:20px 4px; font-family:var(--serif); font-size:22px; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--sienna); font-size:24px; font-family:var(--sans); font-weight:300}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 4px 20px; color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:60ch}
.faq details p a{color:var(--sienna)}

/* cta band */
.ctaband{text-align:center}
.ctaband h2{font-size:clamp(30px,5vw,46px); line-height:1.1; margin:0 0 10px}
.ctaband p{color:var(--ink-soft); font-size:18px; margin:0 0 26px}

/* footer */
footer{border-top:0.5px solid var(--line); margin-top:20px}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:56px 0 30px}
@media (max-width:760px){ .foot{grid-template-columns:1fr 1fr; gap:28px} }
.foot h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sienna); margin:0 0 14px; font-family:var(--sans); font-weight:500}
.foot a{display:block; color:var(--ink-soft); text-decoration:none; font-size:14px; margin-bottom:9px}
.foot a:hover{color:var(--ink)}
.foot .tag{color:var(--ink-soft); font-size:14px; line-height:1.6; max-width:26ch; margin:14px 0 0}
.foot-brand{display:flex; align-items:center; gap:11px}
.foot-brand img{width:34px; height:34px; border-radius:50%}
.foot-brand span{font-family:var(--serif); letter-spacing:.32em; text-transform:uppercase; color:var(--sienna); font-size:14px}
.legal{padding:18px 0 40px; color:var(--ink-soft); font-size:13px; border-top:0.5px solid var(--line)}

.fade{opacity:0; transform:translateY(12px); animation:rise .9s ease forwards}
.fade.d1{animation-delay:.12s}.fade.d2{animation-delay:.24s}.fade.d3{animation-delay:.36s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fade{opacity:1; transform:none; animation:none} html{scroll-behavior:auto} }
@media (max-width:560px){ section{padding:56px 0} .hero{padding:64px 0 52px} .signup{padding:34px 24px} }

/* legal + doc pages */
.doc{max-width:760px; margin:0 auto; padding:44px 0 24px}
.doc h1{font-size:clamp(38px,7vw,58px); margin:0 0 6px}
.doc .updated{color:var(--ink-soft); font-size:14px; margin:0 0 40px}
.doc h2{font-size:25px; margin:38px 0 10px}
.doc p,.doc li{font-size:16px; line-height:1.75; color:var(--ink); max-width:72ch}
.doc p{margin:0 0 16px}
.doc ul{padding-left:20px; margin:0 0 16px}
.doc a{color:var(--sienna)}
.doc .lead{font-size:19px; color:var(--ink-soft); margin-bottom:28px}
.stat{border-left:2px solid var(--sienna); padding:2px 0 2px 22px; margin:0 0 26px; max-width:60ch}
.stat p{font-family:var(--serif); font-size:23px; line-height:1.35; color:var(--ink); margin:0 0 6px}
.stat cite{font-style:normal; font-size:13px; color:var(--ink-soft); letter-spacing:.02em}

/* waitlist over the silhouette */
.waitlist-section{ padding:80px 28px; display:flex; justify-content:center; }
@media (max-width:560px){ .waitlist-section{padding:56px 20px} }

/* waitlist button on the dark card */
#joinBtn{background:var(--paper); color:var(--ink)}
#joinBtn:hover{background:#e6dac6}