:root{
  --bg:#f5f2ea; --ink:#2b2a27; --muted:#6f6a60; --line:#e2dcd0;
  --accent:#8a5a2b; --accent2:#3a6b5a; --card:#fbf9f4; --pro:#2f4b3f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  background:#efe9dc;padding:.1em .35em;border-radius:4px;font-size:.92em}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-weight:bold;font-size:1.25rem;color:var(--ink)}
.nav nav a{margin-left:1.1rem;color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--accent);color:#fff !important;
  padding:.5rem .9rem;border-radius:7px;border:none;cursor:pointer;font:inherit}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--accent) !important;border:1px solid var(--accent)}
.btn.big{font-size:1.1rem;padding:.7rem 1.3rem}
.btn.block{display:block;width:100%;text-align:center}

main{max-width:900px;margin:0 auto;padding:2rem 1.4rem 4rem}

/* Flash */
.flash{max-width:900px;margin:1rem auto 0;padding:.7rem 1rem;border-radius:8px}
.flash.ok{background:#e4efe6;color:#28503c;border:1px solid #bcd9c4}
.flash.err{background:#f6e3df;color:#7a2d22;border:1px solid #e3c0b8}

/* Hero */
.hero{text-align:center;padding:2.5rem 0 1rem}
.hero h1{font-size:2.6rem;margin:.2rem 0}
.lede{font-size:1.2rem;color:var(--muted);max-width:620px;margin:1rem auto}
.cta{margin:1.5rem 0}
.cta .btn{margin:.3rem}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.card h3{margin:.1rem 0 .4rem}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:1rem}
.plan{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6rem}
.plan.pro{border-color:var(--pro);box-shadow:0 6px 20px rgba(47,75,63,.12)}
.price{font-size:2.4rem;margin:.3rem 0}
.price span{font-size:1rem;color:var(--muted)}
.plan ul{padding-left:1.1rem;color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);margin-top:.6rem}

/* Forms */
form.card{max-width:440px;margin:1rem auto}
label{display:block;margin:.8rem 0 .25rem;font-size:.95rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;
  background:#fff;font:inherit;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
.errors{background:#f6e3df;color:#7a2d22;border:1px solid #e3c0b8;
  border-radius:8px;padding:.6rem .9rem;margin-bottom:.6rem}
.errors ul{margin:.2rem 0;padding-left:1.1rem}

/* Distraction-free editor */
.editor-wrap{max-width:720px;margin:0 auto}
.doc-title{font-size:1.5rem;font-weight:bold;border:none;background:transparent;
  padding:.3rem 0;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
.doc-title:focus{outline:none}
.doc-body{width:100%;min-height:62vh;border:none;background:transparent;
  font-size:1.15rem;line-height:1.8;padding:.3rem 0;resize:none}
.doc-body:focus{outline:none}
.editor-status{color:var(--muted);font-size:.85rem;margin-top:.6rem;
  border-top:1px solid var(--line);padding-top:.5rem}

/* Lists */
.doclist,.threadlist{list-style:none;padding:0}
.doclist li,.threadlist li{border-bottom:1px solid var(--line);padding:.7rem 0;
  display:flex;justify-content:space-between;gap:1rem}
.meta{color:var(--muted);font-size:.85rem}

/* Forum thread */
.post{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1.1rem;margin:.7rem 0}
.post .byline{color:var(--muted);font-size:.85rem;margin-bottom:.3rem}
.post .body{white-space:pre-wrap}

footer{text-align:center;color:var(--muted);font-size:.85rem;
  padding:2rem 1rem;border-top:1px solid var(--line)}

.cloud-row{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;margin:.5rem 0;background:var(--card)}
.badge{font-size:.75rem;background:#efe9dc;color:var(--muted);padding:.15rem .5rem;border-radius:20px}
.badge.on{background:#e4efe6;color:#28503c}