/* MEHMBR — shared site styles. Palette + type mirror the app. */
:root {
  --bone: #F4EDE2;
  --bone-deep: #ECE3D4;
  --bone-shadow: #DCD0BC;
  --canvas: #EAE2D6;
  --surface: #F7F2EA;
  --tile-base: #EFE6D6;
  --tile-raised: #F8F1E2;
  --cocoa: #2A2520;
  --cocoa-soft: #4A4038;
  --cocoa-muted: #7A6E62;
  --brass: #A8794A;
  --brass-deep: #845A2E;
  --brass-glow: rgba(168, 121, 74, 0.22);
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Inter', sans-serif;
  --maxw: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--cocoa);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brass-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(234, 226, 214, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--bone-shadow);
}
.topbar .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.28em;
  color: var(--cocoa);
  text-transform: uppercase;
}
.wordmark:hover { text-decoration: none; }
.topbar nav a {
  font-size: 13px; font-weight: 400; color: var(--cocoa-muted);
  margin-left: 22px; letter-spacing: 0.02em;
}
.topbar nav a:hover { color: var(--brass-deep); text-decoration: none; }

/* ---- Wrap ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Hero (landing) ---- */
.hero { padding: 96px 0 64px; text-align: center; }
.hero .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500; margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(38px, 8vw, 62px); line-height: 1.08;
  margin: 0 0 22px; color: var(--cocoa);
}
.hero p {
  font-size: 17px; font-weight: 300; color: var(--cocoa-soft);
  max-width: 520px; margin: 0 auto 14px;
}
.hero .note {
  font-size: 13px; color: var(--cocoa-muted); margin-top: 34px;
  letter-spacing: 0.02em;
}

/* ---- Cards row ---- */
.cards { display: grid; gap: 16px; padding: 8px 0 72px; }
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--tile-raised);
  border: 1px solid var(--bone-shadow);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(42,37,32,0.05);
}
.card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 21px;
  margin: 0 0 8px; color: var(--cocoa);
}
.card p { font-size: 14px; font-weight: 300; color: var(--cocoa-soft); margin: 0; }

/* ---- Section headers ---- */
.section-label {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500; margin: 48px 0 18px;
}

/* ---- Legal index list ---- */
.doclist { list-style: none; margin: 0 0 72px; padding: 0; }
.doclist li {
  border-bottom: 1px solid var(--bone-shadow);
}
.doclist a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; color: var(--cocoa); font-size: 16px;
}
.doclist a:hover { text-decoration: none; color: var(--brass-deep); }
.doclist .chev { color: var(--brass); font-size: 18px; }

/* ---- Legal document pages ---- */
.doc { padding: 48px 0 88px; }
.doc .back {
  font-size: 13px; color: var(--cocoa-muted); display: inline-block; margin-bottom: 28px;
}
.doc h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(30px, 6vw, 44px); line-height: 1.12; margin: 0 0 8px; color: var(--cocoa);
}
.doc h2 {
  font-family: var(--serif); font-weight: 500; font-size: 24px;
  margin: 40px 0 12px; color: var(--cocoa);
}
.doc h3 {
  font-family: var(--sans); font-weight: 500; font-size: 16px;
  letter-spacing: 0.01em; margin: 28px 0 8px; color: var(--cocoa);
}
.doc p, .doc li { font-size: 15.5px; font-weight: 300; color: var(--cocoa-soft); }
.doc strong { font-weight: 500; color: var(--cocoa); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--bone-shadow); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--bone-deep); font-weight: 500; color: var(--cocoa); }
.doc hr { border: none; border-top: 1px solid var(--bone-shadow); margin: 32px 0; }
.doc .meta { font-size: 13px; color: var(--cocoa-muted); font-weight: 400; margin: 0 0 24px; }

/* ---- Support page ---- */
.support { padding: 56px 0 88px; }
.support h1 {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(32px, 6vw, 48px); margin: 0 0 16px; color: var(--cocoa);
}
.support .email {
  display: inline-block; margin: 8px 0 24px;
  font-size: 18px; font-weight: 500; color: var(--brass-deep);
}
.support .box {
  background: var(--tile-raised); border: 1px solid var(--bone-shadow);
  border-radius: 16px; padding: 24px; margin: 18px 0; font-size: 15px; font-weight: 300;
  color: var(--cocoa-soft);
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--bone-shadow);
  background: var(--bone-deep);
}
footer .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 56px;
  font-size: 13px; color: var(--cocoa-muted); font-weight: 300;
}
footer .flinks { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer .flinks a { color: var(--cocoa-soft); font-size: 13px; }
footer .legalline { line-height: 1.7; }
footer .wordmark-sm {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cocoa-soft); margin-bottom: 14px; display: block;
}