:root { --felt:#1E2A26; --felt2:#2B3B36; --ivory:#F4EFE3; --paper:#E4DBC6; --brass:#9C7A2E; --brass-l:#C8A253; --rose:#B5695A; --ink:#17201D; --ok:#3F7D5A; }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin:0; background:var(--ivory); color:var(--ink); font-family:Fraunces,Georgia,serif; font-variation-settings:"opsz" 24; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color: var(--brass) }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
nav { display:flex; align-items:center; justify-content:space-between; padding: 22px 0; font-size:.95rem; }
nav .brand { text-decoration:none; color:var(--ink); font-weight:500; font-size:1.05rem; }
nav .brand em { font-style:italic; color:var(--brass) }
nav form { margin:0 }
h1 { font-weight:300; font-size:clamp(2rem, 6vw, 3rem); line-height:1.08; margin: 0 0 14px; font-variation-settings:"opsz" 144; letter-spacing:-.005em; }
h2 { font-weight:400; font-size:1.35rem; margin: 36px 0 10px; }
h1 em, h2 em, .lead em { font-style:italic; font-weight:500; color:var(--brass) }
.lead { font-size:1.15rem; max-width:44ch; margin:0 0 20px; opacity:.85 }
.muted { opacity:.6; font-size:.92rem }
.card { background:#fff; border:1.5px solid var(--paper); border-radius:14px; padding:20px 22px; margin: 14px 0; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.grow { flex:1 1 200px }
label { display:block; font-size:.9rem; opacity:.7; margin: 14px 0 4px; }
input, textarea, select {
  font:inherit; font-size:1rem; width:100%; color:var(--ink); background:#fff;
  border:1.5px solid var(--paper); border-radius:10px; padding:11px 13px; outline:0;
}
input:focus, textarea:focus { border-color: var(--brass) }
textarea { min-height: 84px; resize: vertical }
.btn, button {
  font:inherit; font-size:1rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block;
  border:1.5px solid var(--brass); background:transparent; color:var(--ink); border-radius:999px; padding:11px 20px;
  transition: background .15s, transform .08s;
}
.btn.primary, button.primary { background:var(--brass); color:var(--ivory) }
.btn.danger, button.danger { border-color:var(--rose); color:var(--rose) }
.btn.link, button.link { border:0; padding:6px 8px; font-weight:300; opacity:.75; text-decoration:underline }
button:active { transform:scale(.985) }
button[disabled] { opacity:.45; cursor:default }
button:focus-visible, .btn:focus-visible { outline:2px solid var(--brass); outline-offset:3px }
.pill { display:inline-block; font-size:.8rem; padding:3px 10px; border-radius:999px; background:var(--paper); border:0 }
.pill.on { background:#DDEBE1; color:var(--ok) } .pill.off { background:#F1DCD6; color:var(--rose) } .pill.warn { background:#F3E7C6; color:var(--brass) }
.err { color:var(--rose); margin-top:8px }
.ok { color:var(--ok); margin-top:8px }
.hidden { display:none !important }
footer { padding: 60px 0 40px; opacity:.55; font-size:.9rem }
.empty { text-align:center; opacity:.6; padding:50px 0 }
/* message list */
.msg { border-top:1.5px solid var(--paper); padding:18px 0 8px; display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:start }
.msg .who { font-size:1.15rem; font-weight:500 } .msg .who span { font-weight:300; opacity:.6; font-size:.95rem; margin-left:8px }
.msg .when { opacity:.55; font-size:.9rem }
.msg .media { grid-column:1/-1 }
.msg audio { width:100% } .msg img, .msg video { max-width:100%; max-height:420px; border-radius:6px; display:block; background:var(--felt) }
.msg .note { font-style:italic; margin:8px 0 0 }
.msg .acts { grid-column:1/-1; display:flex; gap:14px; font-size:.9rem }
.msg .acts a, .msg .acts button { font:inherit; color:var(--brass); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline }
.msg .acts button.danger { color:var(--rose) }
/* landing */
.hero { padding: 40px 0 20px }
.steps { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 24px 0 }
.steps .card { margin:0 } .steps .n { font-size:2rem; font-weight:300; color:var(--brass-l); line-height:1 }
.phone-preview { background:var(--felt); color:var(--ivory); border-radius:22px; padding:34px 22px; text-align:center; margin:30px auto; max-width:340px }
.phone-preview h3 { font-weight:300; font-size:1.6rem; margin:0 0 6px; font-variation-settings:"opsz" 144 } .phone-preview em { color:var(--brass-l) }
.phone-preview svg { width:200px; margin: 18px auto 6px; display:block }
/* showcase gifs */
.showcase { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0 8px }
.showcase figure { margin:0 } .showcase img { width:100%; aspect-ratio: 9/16; object-fit:cover; border-radius:16px; background:var(--felt); border:1.5px solid var(--paper); display:block }
.showcase figcaption { font-size:.92rem; opacity:.7; margin-top:8px }
/* legal */
.legal h2 { margin-top: 34px } .legal p, .legal li { max-width: 68ch } .legal ul { padding-left: 20px }
.legal table { border-collapse: collapse; width:100%; font-size:.95rem } .legal td, .legal th { text-align:left; padding:8px 10px 8px 0; border-bottom:1.5px solid var(--paper); vertical-align:top }