:root{
  --bg:#0a0b0b; --line:#181c19; --line2:#1c211e; --ink:#f2f3f0; --dim:#8b948e; --faint:#5c655f;
  --maxw:1120px; --pad:40px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg); color:var(--ink);
  font-family:"Geist",-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{overflow-x:hidden}
img,video{max-width:100%; display:block}
a{color:inherit}
.mono{font-family:"Geist Mono",ui-monospace,"SF Mono",monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.muted{color:var(--faint)}

/* buttons / links */
.btn{display:inline-block; background:var(--ink); color:#0a0b0b; border:none; border-radius:9px;
  padding:10px 16px; font:600 14px/1 "Geist",system-ui; cursor:pointer; text-decoration:none;
  transition:transform .15s, opacity .2s}
.btn:hover{transform:translateY(-1px); opacity:.92}
.btn.lg{padding:13px 24px; font-size:15px}
.link{color:var(--ink); text-decoration:none; font-size:15px; font-weight:450; opacity:.8}
.link:hover{opacity:1}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{font-weight:500; font-size:19px; letter-spacing:-.02em; text-decoration:none}
.navlinks{display:flex; gap:28px}
.navlinks a{color:var(--dim); text-decoration:none; font-size:14px; font-weight:450; transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navright{display:flex; align-items:center; gap:18px}
.toggle{display:flex; border:1px solid var(--line2); border-radius:8px; overflow:hidden; font-size:12px; font-weight:500}
.toggle button{background:none; border:none; padding:6px 9px; color:var(--dim); cursor:pointer; font-family:inherit}
.toggle button.on{background:#20241f; color:var(--ink)}
@media(max-width:720px){ .navlinks{display:none} }

/* headings shared */
.lead{font-weight:450; font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:-.03em; max-width:18ch}
.leadsub{margin-top:18px; max-width:52ch; color:var(--dim); font-size:18px; line-height:1.55}
.leadsub.end{padding-bottom:6px}

/* hero */
.hero{padding:110px 0 0}
.hero h1{font-weight:450; font-size:clamp(38px,4.6vw,62px); line-height:1.06; letter-spacing:-.03em; max-width:17ch}
.hero .sub{margin-top:24px; max-width:46ch; font-size:19px; line-height:1.55; color:var(--dim)}
.cta{margin-top:32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.works{margin-top:28px; font-size:12.5px; letter-spacing:.02em; color:var(--faint)}

.shotwrap{position:relative; margin:70px 0 0; display:flex; justify-content:center}
.glow{position:absolute; top:-30px; left:50%; transform:translateX(-50%); width:680px; max-width:90%; height:320px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 66%); filter:blur(30px); pointer-events:none}
.shot{position:relative; width:100%; max-width:940px; border:1px solid #262c27; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0f130f,#0e1210); box-shadow:0 40px 120px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.02) inset}
.tbar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid #20261f}
.tl{width:11px;height:11px;border-radius:50%}.tl.r{background:#ec6a5e}.tl.y{background:#f4bf4f}.tl.g{background:#61c554}
.tbt{margin-left:8px; font-size:12px; color:#626b66}
.shotbody{display:grid; grid-template-columns:1.4fr 1fr; min-height:300px}
@media(max-width:640px){ .shotbody{grid-template-columns:1fr} }
.tcol{padding:20px 22px; border-right:1px solid #191e1a}
.who{font-size:11.5px; font-weight:500; margin-bottom:3px; color:#79837d}
.who.me{color:var(--ink)}
.say{font-size:14.5px; line-height:1.5; color:#cfd6d0; margin-bottom:15px}
.scol{padding:20px 22px; background:#0c110e}
.slbl{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#79837d}
.scol ul,.sumcard ul{margin:14px 0 0; padding-left:16px; color:#c3cbc5; font-size:13.5px; line-height:1.75}
.pn{position:absolute; bottom:12px; right:16px; font-size:10px; color:#39413b}
.media{position:relative}

/* sections */
.section{padding:96px 0}
.section > .lead{margin-bottom:0}

/* walkthrough */
.step{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:76px 0; border-top:1px solid var(--line2)}
.step:first-of-type{margin-top:56px}
.step.flip .txt{order:2}
@media(max-width:860px){ .step{grid-template-columns:1fr; gap:30px} .step.flip .txt{order:0} }
.idx{font-size:12px; color:var(--faint); letter-spacing:.1em}
.step h3{margin-top:14px; font-weight:500; font-size:26px; letter-spacing:-.02em}
.step p{margin-top:12px; color:var(--dim); font-size:16.5px; line-height:1.6; max-width:40ch}
.card{position:relative; border:1px solid #262c27; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#0f130f,#0e1210); box-shadow:0 24px 70px rgba(0,0,0,.5)}
.notif{padding:16px; display:flex; gap:13px; align-items:flex-start}
.gdot{width:34px;height:34px;border-radius:10px;border:1px solid #2b322c;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.nt{font-weight:500; font-size:14px}.ns{color:var(--dim); font-size:12.5px; margin-top:2px}
.nbtns{display:flex; gap:8px; margin-top:12px}
.nb{border-radius:7px; padding:7px 12px; font-size:12px; font-weight:500}
.nb.pri{background:var(--ink); color:#0a0b0b}.nb.sec{border:1px solid #2b322c; color:var(--dim)}
.tbody{padding:16px 18px}
.sumcard{padding:16px 18px}
.ask{margin-top:12px;border-top:1px solid #191e1a;padding:14px 18px}
.q{font-size:13px;color:var(--ink)}.qmark{color:var(--faint)}
.a{font-size:13px;color:var(--dim);margin-top:7px;line-height:1.55}

/* free grid */
.freehead{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap}
.fgrid{margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .fgrid{grid-template-columns:1fr} }
.cell{background:var(--bg); padding:26px 24px 30px}
.cell .ck{font-size:13px; color:var(--ink)}
.cell h4{margin-top:14px; font-weight:500; font-size:17px; letter-spacing:-.01em}
.cell p{margin-top:8px; color:var(--dim); font-size:14px; line-height:1.55}
.foot{margin-top:26px; color:var(--faint); font-size:13.5px}
.foot a{color:var(--ink); text-decoration:none; opacity:.8}.foot a:hover{opacity:1}

/* cloud */
.cloudhead{max-width:60ch}
.cgrid{margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(max-width:720px){ .cgrid{grid-template-columns:1fr} }
.cgrid .cpt{background:var(--bg); padding:26px 26px 30px}
.cpt h4{font-weight:500; font-size:18px; letter-spacing:-.01em}
.cpt p{margin-top:10px; color:var(--dim); font-size:15px; line-height:1.55}
.wideshot{margin:56px 0 0; border:1px solid #262c27; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0f130f,#0e1210); box-shadow:0 30px 90px rgba(0,0,0,.5)}
.cloudcta{margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}

/* pricing table */
.pricehead{max-width:60ch}
.ptwrap{margin-top:52px}
.ptable{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg)}
.prow{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:center}
.prow + .prow{border-top:1px solid var(--line)}
.prow.phead{align-items:stretch}
.pcell{padding:15px 20px; font-size:15px}
.prow .pcell + .pcell{border-left:1px solid var(--line)}
.pcell.lbl{color:var(--dim)}
.pcell.yes{text-align:center; color:var(--ink)}
.pcell.no{text-align:center; color:var(--faint)}
/* faint vertical highlight band on the suggested (Plus) column */
.prow .pcell:nth-child(3){background:#0f130f}
.phead .pcell{padding:22px 20px}
.pname{font-size:12px; color:var(--dim); letter-spacing:.05em; text-transform:uppercase}
.pprice{font-size:27px; font-weight:450; letter-spacing:-.02em; margin-top:8px}
.pper{font-size:12px; color:var(--faint); margin-top:2px}
.pbadge{margin-top:10px; font-size:10px; color:#0a0b0b; background:var(--dim); display:inline-block; padding:2px 7px; border-radius:5px; letter-spacing:.02em}
.pcell.poolv{text-align:center; font-size:14px; color:var(--ink)}
.phrs{display:block; font-size:11px; color:var(--faint); margin-top:4px}
.pnote{margin-top:20px; font-size:12px; color:var(--faint); line-height:1.65; max-width:74ch}
.pcta{margin-top:26px}
@media(max-width:760px){ .ptwrap{overflow-x:auto; -webkit-overflow-scrolling:touch} .ptable{min-width:620px} }

/* dictation / split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:30px} }
.mediabox,.ghost{position:relative; border:1px solid #262c27; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0f130f,#0e1210); box-shadow:0 24px 70px rgba(0,0,0,.5)}
.wideshot video,.mediabox video,.ghost video{width:100%; height:auto; display:block; min-height:220px; object-fit:cover}
/* keep a stable box even if the clip fails to load, so nothing collapses */
.wideshot,.mediabox,.ghost{min-height:260px}

/* editor (block-doc mock) */
.editor{position:relative}
.edwin{border:1px solid #262c27; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#0f130f,#0e1210); box-shadow:0 24px 70px rgba(0,0,0,.5)}
.edbody{padding:18px 20px 24px}
.edrow{display:flex; gap:10px; align-items:flex-start; padding:5px 0}
.edgut{color:#3a423c; font-size:12px; line-height:1.7; flex:0 0 auto; opacity:0; transition:opacity .15s; user-select:none}
.edrow:hover .edgut{opacity:1}
.edh{font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--ink)}
.edp{font-size:14.5px; color:var(--dim); line-height:1.5}
.edcallout{display:flex; gap:10px; background:#12180f; border:1px solid #23301f; border-radius:8px; padding:10px 12px; font-size:14px; color:#cfd6d0; line-height:1.45}
.edtodo{display:flex; gap:9px; align-items:center; font-size:14.5px; color:#cfd6d0}
.edck{font-family:"Geist Mono",ui-monospace,monospace; color:#5c655f}
.edck.on{color:var(--ink)}
.edquote{border-left:2px solid #2c322c; padding-left:12px; font-size:14px; color:var(--dim); line-height:1.5}

/* privacy */
.choices{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(max-width:720px){ .choices{grid-template-columns:1fr} }
.choice{background:var(--bg); padding:28px 26px 32px}
.choice .ch{font-size:13px; color:var(--ink); letter-spacing:.02em}
.choice p{margin-top:12px; color:var(--dim); font-size:15px; line-height:1.55}

/* character */
.character{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
@media(max-width:860px){ .character{grid-template-columns:1fr; gap:30px} }
/* author signature — the trust anchor for a solo-built product */
.sig{margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13px; color:var(--dim); letter-spacing:.01em}
.sig a{color:var(--ink); text-decoration:none; border-bottom:1px solid #2a312c;
  padding-bottom:1px; transition:border-color .2s}
.sig a:hover{border-color:var(--dim)}

/* faq */
.faq{margin-top:44px; max-width:760px}
.faq details{border-top:1px solid var(--line2); padding:20px 0}
.faq summary{cursor:pointer; font-size:18px; font-weight:450; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--faint); font-family:"Geist Mono",monospace}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:12px; color:var(--dim); font-size:16px; line-height:1.6; max-width:60ch}

/* waitlist */
.waitlist{text-align:center; display:flex; flex-direction:column; align-items:center}
.waitlist .lead{max-width:20ch}
.waitlist .leadsub{margin-left:auto;margin-right:auto}
.wlform{margin-top:30px; display:flex; gap:10px; width:100%; max-width:460px}
.wlform input{flex:1; background:#0e1210; border:1px solid #262c27; border-radius:9px; color:var(--ink);
  padding:13px 15px; font:15px "Geist",system-ui; outline:none}
.wlform input:focus{border-color:#3a463d}
.wlform input::placeholder{color:#566059}
.wlmsg{margin-top:16px; font-size:13px; color:var(--dim)}
.wlmsg.err{color:#e08a8a}

/* footer */
.foot-nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:40px; padding-bottom:56px;
  margin-top:40px; border-top:1px solid var(--line2); flex-wrap:wrap}
.fbrand{font-weight:500; font-size:17px}
.flinks{display:flex; gap:24px}
.flinks a{color:var(--dim); text-decoration:none; font-size:14px}.flinks a:hover{color:var(--ink)}
.fcopy{color:var(--faint); font-size:12px}

/* reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:4px
}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover{transform:none}
}