/* RepOff – shared legal/support styling (dark, teal accent — matches the app) */
:root {
  --bg: #0b0c10;
  --card: #15171e;
  --border: #252934;
  --text: #e9ebf1;
  --dim: #a6acbb;
  --faint: #6c7280;
  --accent: #2dd4bf;
  --accent-2: #1fa595;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  background-image: radial-gradient(900px 380px at 50% -160px, rgba(45, 212, 191, 0.12), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  line-height: 1.65;
  padding: 34px 18px 72px;
}

.wrap { max-width: 680px; margin: 0 auto; }

/* Brand header */
.brand { display: flex; align-items: center; gap: 11px; margin: 4px 2px 26px; text-decoration: none; }
.brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05231e; font-weight: 800; font-size: 21px; line-height: 1;
  display: grid; place-items: center;
}
.brand .name { color: var(--text); font-weight: 700; font-size: 17px; letter-spacing: 0.2px; }
.brand .name b { color: var(--accent); font-weight: 700; }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 24px 60px rgba(0,0,0,0.35);
}

h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 1.12rem; font-weight: 700; margin: 1.9rem 0 0.5rem; color: var(--text); }
p { margin: 0.8rem 0; color: var(--dim); }
ul { margin: 0.6rem 0; padding-left: 1.3rem; color: var(--dim); }
li { margin: 0.4rem 0; }
li::marker { color: var(--accent); }
strong { color: var(--text); font-weight: 650; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.updated { font-size: 0.85rem; color: var(--faint); margin: 0 0 1.5rem; }
.lead { font-size: 1.05rem; color: var(--dim); }

/* Email highlight (support page) */
.email-box {
  display: inline-block; margin: 8px 0 2px; padding: 15px 22px;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.32);
  border-radius: 14px; font-size: 1.05rem; font-weight: 600; word-break: break-all;
}

/* Overview list (index) */
.toc { list-style: none; padding: 0; margin: 0.6rem 0; }
.toc li { margin: 0.55rem 0; }
.toc a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; }
.toc a::before { content: "›"; color: var(--accent); font-weight: 800; }

/* Footer nav */
.footer-nav { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--border); font-size: 0.9rem; }
.footer-nav a { color: var(--dim); }
.footer-nav a:hover { color: var(--accent); }

@media (max-width: 480px) {
  body { padding: 24px 14px 56px; }
  .card { padding: 26px 20px; border-radius: 18px; }
  h1 { font-size: 1.5rem; }
}