/* Emberwake — v1 draft styles. Calm, warm, restrained (Anthropic/Notion lineage). */
:root{
  --bg:#faf8f5; --bg-warm:#f3ede4; --ink:#1c1814; --ink-soft:#544c43;
  --line:#e7ddd0; --ember:#cf5a26; --ember-deep:#a8420f;
  --max:1080px; --narrow:640px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.1; letter-spacing:-.01em; margin:0}
p{margin:0 0 1rem}
em{font-style:italic; color:var(--ink)}
strong{font-weight:600}
a{color:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:var(--narrow); margin:0 auto; padding:0 24px}
section{padding:84px 0}
.accent{color:var(--ember)}

/* nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(250,248,245,.82);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:"Fraunces",serif; font-weight:500; font-size:1.4rem}
.brand.small{font-size:1.15rem}
.spark{color:var(--ember)}

/* buttons */
.btn{display:inline-block; padding:13px 22px; border-radius:999px; font-weight:500;
  font-size:1rem; text-decoration:none; transition:.15s; white-space:nowrap}
.btn-solid{background:var(--ember); color:#fff}
.btn-solid:hover{background:var(--ember-deep)}
.btn-ghost{color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ember); color:var(--ember)}

/* hero */
.hero{padding:120px 0 96px; text-align:left}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.lede{font-size:clamp(1.15rem,2.4vw,1.4rem); color:var(--ink-soft); max-width:33ch; margin:1.6rem 0 2.2rem}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}

/* the one idea */
.idea{background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.idea h2{font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1.4rem}
.idea p{font-size:1.2rem; color:var(--ink-soft)}

/* section heads */
.section-head{font-size:clamp(1.8rem,4vw,2.6rem)}
.section-sub{color:var(--ink-soft); margin:.6rem 0 2.4rem}

/* how it works */
.how .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px; margin-top:2.2rem}
.step .num{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:999px; background:var(--ember); color:#fff; font-family:"Fraunces",serif; font-size:1.15rem; margin-bottom:.9rem}
.step h3{font-size:1.3rem; margin-bottom:.4rem}
.step p{color:var(--ink-soft); margin:0}

/* your brain, your memory (dark band) */
.brainmem{background:var(--ink); color:#f3ede4}
.brainmem h2{color:#fff; font-size:clamp(1.9rem,4.4vw,2.8rem); margin-bottom:1.6rem}
.brainmem p{color:#cdbfb0; font-size:1.18rem}
.brainmem strong{color:#fff}
.brainmem em{color:#f3ede4; font-style:italic}

/* demos */
.demos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.demo{margin:0}
.demo-video{aspect-ratio:16/10; background:linear-gradient(135deg,#211a14,#3a2a1c);
  color:#caa37e; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--line)}
.demo figcaption{margin-top:.9rem; color:var(--ink-soft); font-size:1rem}
.demo figcaption b{color:var(--ink); font-weight:600}

/* pillars */
.pillars{background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:34px 40px; margin-top:2.2rem}
.pillar h3{font-size:1.35rem; margin-bottom:.5rem}
.pillar p{color:var(--ink-soft); margin:0}

/* enterprise + why */
.enterprise h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.2rem}
.enterprise p{font-size:1.15rem; color:var(--ink-soft)}
.why{background:var(--ink); color:#f3ede4}
.why .why-line{font-family:"Fraunces",serif; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.25; color:#fff; margin-bottom:1.2rem}
.why p{color:#cdbfb0}

/* access */
.access h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.2rem}
.access p{color:var(--ink-soft); font-size:1.1rem}
.access .btn{margin-top:.6rem}
.microcopy{font-size:.92rem; color:var(--ink-soft); margin-top:1rem}

/* signup form */
.signup{display:flex; flex-direction:column; gap:12px; max-width:420px; margin-top:.6rem}
.signup input, .signup textarea{font-family:inherit; font-size:1rem; padding:13px 15px;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); width:100%}
.signup textarea{resize:vertical}
.signup input:focus, .signup textarea:focus{outline:none; border-color:var(--ember)}
.signup .btn{margin-top:.2rem; border:none; cursor:pointer; text-align:center}
.hp{position:absolute; left:-9999px; height:0; overflow:hidden}

/* founding */
.founding{background:var(--bg-warm); border-top:1px solid var(--line)}
.founding p{color:var(--ink-soft); font-style:italic}

/* footer */
.foot{padding:40px 0; border-top:1px solid var(--line)}
.foot .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.foot-note{color:var(--ink-soft); font-size:.92rem}

@media (max-width:640px){
  section{padding:60px 0}
  .hero{padding:80px 0 64px}
  .lede{max-width:none}
}