:root{
  --navy:#0F2A4A; --navy-2:#163A5E; --navy-3:#1D4470;
  --gold:#B8863B; --parchment:#C9BEA8; --sage:#7A9E7E;
  --paper:#F7F5F0; --ink:#262A2B; --white:#FFFFFF; --warn:#B5502C;
  --line: rgba(15,42,74,0.10);
  --shadow: 0 1px 2px rgba(15,42,74,0.06), 0 6px 20px rgba(15,42,74,0.08);
}
*{box-sizing:border-box;}
html{ overflow-x:hidden; }
body{ margin:0; font-family:'Work Sans',sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:'Fraunces',serif; letter-spacing:-0.01em; margin:0; }
.mono{ font-family:'JetBrains Mono',monospace; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

/* ---------- TOP BAR (feedback, get-started, feature-catalog, usage-guide) ---------- */
.topbar{ height:60px; background:var(--navy); display:flex; align-items:center; gap:14px; padding:0 24px; color:var(--white); }
.seal{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold); position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.seal::before{ content:''; position:absolute; inset:4px; border-radius:50%; border:1px dashed var(--gold); }
.seal svg{ width:13px; height:13px; stroke:var(--gold); }
.tb-word{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; white-space:nowrap; }
.tb-sub{ font-size:12px; color:var(--parchment); padding-left:14px; border-left:1px solid rgba(255,255,255,0.2); }
.tb-back{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--parchment); flex:0 0 auto; }
.tb-back:hover{ color:var(--white); }
.sidebar-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,0.25); border-radius:8px; width:36px; height:36px; align-items:center; justify-content:center; color:var(--white); flex:0 0 auto; }
.sidebar-toggle svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }

/* ---------- SIMPLE PAGE SHELL (feedback, get-started) ---------- */
.page{ display:flex; justify-content:center; padding:56px 24px 90px; }
.stage{ width:100%; max-width:540px; }

/* ---------- FORM FIELD BASICS (feedback, get-started) ---------- */
.field{ margin-bottom:18px; }
.field:last-of-type{ margin-bottom:0; }
.field label{ display:block; font-size:11.5px; font-weight:600; color:var(--navy); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }