/* myKRUE's palette, as the app has it: Midnight ink, Deep Teal for the main
   action, Harvest Gold accent, Warm Cream for quiet fills. */
:root {
  --ink: #172a32;
  --teal: #1f6b64;
  --gold: #d9a441;
  --cream: #f7f3e8;
  --line: #eae6dc;
  --body: #44535a;
  --muted: #5c6a70;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 36px 24px 64px;
}
header img { width: 84px; height: 84px; border-radius: 20px; }
header .name { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; margin: 12px 0 4px; }
header .tag { color: #7fc27a; font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
main {
  background: #fff;
  border-radius: 32px 32px 0 0;
  margin: -32px auto 0;
  max-width: 560px;
  padding: 28px 24px 40px;
}
h1 { font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 10px; }
p { color: var(--body); margin: 0 0 16px; }
.code {
  background: var(--cream);
  border-radius: 20px;
  padding: 18px;
  text-align: center;
  margin: 20px 0;
}
.code .label { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.code .value { font-size: 34px; font-weight: 900; letter-spacing: 0.12em; margin: 6px 0 12px; }
button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 800;
  min-height: 52px;
  padding: 0 28px;
}
ol { color: var(--body); padding-left: 22px; margin: 0 0 20px; }
li { margin-bottom: 8px; }
.note { border-top: 1.5px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 15px; }
a { color: var(--ink); font-weight: 700; }
footer { text-align: center; color: var(--muted); font-size: 14px; padding: 0 24px 40px; }