/* MoveMark account pages. System fonts only; the app's tokens (MMInk). */
:root {
  --hero: #161817;
  --hero-secondary: rgba(255, 255, 255, 0.62);
  --raised: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.12);
  --lime: #cae36c;
  --on-lime: #111608;
  --text: rgba(255, 255, 255, 0.92);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--hero); color: var(--text); }

body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

main {
  width: 100%;
  max-width: 440px;
  padding: 56px 20px 40px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 44px;
}
.wordmark img { width: 13px; height: 13px; display: block; }

h1 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.lede { color: var(--hero-secondary); margin: 0 0 32px; }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 25px;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  margin: 0 0 28px;
}
.button:active { opacity: 0.85; }
.button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.card {
  background: var(--raised);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px 18px 6px;
  margin: 0 0 28px;
}
.card h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.card ol { margin: 0; padding: 0 0 0 20px; color: var(--hero-secondary); }
.card li { margin: 0 0 12px; }
.card strong { color: var(--text); font-weight: 600; }

.fine { color: var(--hero-secondary); font-size: 13px; margin: 0; }

[hidden] { display: none !important; }