/* Heritkey theme: deep green and warm amber, larger text for older readers,
   plus the heirs and vault screens in the phone mockup. */

:root {
  --bg: #f5f2ea;
  --surface: #ffffff;
  --surface-2: #ece6d9;
  --ink: #1a1d1b;
  --muted: #535b56;
  --line: #e0d9ca;
  --line-strong: #cbc2ae;
  --header-bg: rgba(245, 242, 234, .88);
  --primary: #1f4a3a;
  --primary-2: #2a5d4a;
  --primary-dark: #15362a;
  --primary-rgb: 31, 74, 58;
  --accent: #c58b3c;
  --accent-ink: #84551a;
  --accent-light: #e6c48f;
  --accent-rgb: 197, 139, 60;
}

/* Larger, calmer text for older readers */
body { font-size: 18px; }
h1 { font-size: clamp(38px, 5.2vw, 56px); }
.btn { min-height: 54px; font-size: 17px; }
.btn-sm { min-height: 42px; font-size: 15px; }
.card p, .steps p, .enc-points p { font-size: 17px; }
.faq summary { font-size: 19px; }
.proof li { font-size: 16px; }

/* Phone mockup: heirs and vault list */
.heirs { background: var(--primary); color: #fff; border-radius: 18px; padding: 12px 14px; }
.heirs-title { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 4px; }
.heir { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.heir + .heir { border-top: 1px solid rgba(255, 255, 255, .12); }
.heir-name { flex: 1; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.heir-name small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .65); }
.sealed { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--accent-light); }
.sealed .i { width: 11px; height: 11px; stroke-width: 2.6; }
.vault-list { list-style: none; margin: 0; padding: 0; }
.vault-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 600; color: var(--ink); }
.vault-list li + li { border-top: 1px solid var(--line); }
.vault-list .i { width: 14px; height: 14px; color: var(--accent-ink); }
.vault-list .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.rule { font-size: 12.5px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .proof li { font-size: 14px; }
}