:root{
  /* Roman Mosaic — light marble, warm charcoal, olive/laurel accent, grout hairlines. */
  --bg:#F4F1EA; --surface:#FAF8F3; --ink:#2E2E2A; --body:#3C3A34;
  --dim:#6E6B63; --dim2:#8A867C;
  --red:#3F4E28;        /* laurel — accent used as TEXT (kept name to avoid churn) */
  --accent:#6B7F3F;     /* olive — accent used as FILLS (buttons, keyline) */
  --hair:#D9D4C8;       /* grout */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:680px; margin:0 auto; padding:0 24px; }

header.masthead{ padding:26px 0 16px; border-bottom:1px solid var(--hair); margin-bottom:40px; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-family:var(--mono); font-weight:700; letter-spacing:2px; color:var(--red); font-size:15px; text-decoration:none; border:none; }
nav a{ color:var(--dim); text-decoration:none; font-size:14px; margin-left:18px; border:none; }
nav a:first-child{ margin-left:0; }
nav a:hover{ color:var(--ink); }
nav a.active{ color:var(--ink); }

h1{ font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.1; letter-spacing:-.5px; color:var(--ink); margin:.1em 0 .4em; }
h2{ font-family:var(--serif); font-weight:600; font-size:23px; color:var(--ink); margin:1.9em 0 .4em; }
.kicker{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:2px; color:var(--red); text-transform:uppercase; margin:0 0 6px; }
p{ margin:0 0 1.1em; }
a{ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(63,78,40,.4); }
a:hover{ border-bottom-color:var(--red); }
strong{ color:var(--ink); font-weight:600; }
em{ color:var(--dim); font-style:italic; }
hr{ border:none; border-top:1px solid var(--hair); margin:2.4em 0; }
.keyline{ width:120px; height:6px; background:var(--accent); border-radius:3px; margin:16px auto 28px; }

.hero-mark{ display:flex; justify-content:center; margin:10px 0 24px; }
.mark{ width:88px; height:88px; }
.center{ text-align:center; }
.lead{ max-width:540px; margin-left:auto; margin-right:auto; }
.cta{ display:inline-block; background:var(--accent); color:#F4F1EA; font-weight:600; padding:13px 24px; border-radius:12px; border:none; font-size:15px; }
.cta:hover{ filter:brightness(1.06); }
.cta.soon{ background:var(--surface); color:var(--dim); cursor:default; border:1px solid var(--hair); }

.feature{ display:flex; gap:14px; align-items:flex-start; margin:0 0 16px; }
.feature .n{ font-family:var(--mono); color:var(--red); font-size:14px; padding-top:3px; }
.feature div p{ margin:0; }

ul.faq{ list-style:none; padding:0; margin:0; }
.q{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); margin:1.7em 0 .3em; }

footer{ border-top:1px solid var(--hair); margin-top:56px; padding:28px 0 52px; color:var(--dim2); font-size:13px; line-height:1.6; }
footer a{ color:var(--dim); border:none; }
footer a:hover{ color:var(--ink); }
.muted{ color:var(--dim2); }

@media (max-width:520px){
  body{ font-size:16px; }
  h1{ font-size:32px; }
}