/* Attaway — the public site. Brand tokens mirrored from theme/colors.ts by hand, because a
   static site cannot import the app's TypeScript. Keep them in step. */
:root {
  --cream: #faf3e3;
  --eggshell: #fffdf6;
  --cocoa: #3d2c23;
  --cocoa60: rgba(61, 44, 35, 0.6);
  --powder: #8fb7dd;
  --powder-deep: #5c88b8;
  --tomato: #e2543e;
  --butter: #f2c14e;
  --linen: #efe6d4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
h1, h2, .display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: 2rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.brand { font-size: 1.1rem; margin-bottom: 2rem; display: block; text-decoration: none; color: var(--cocoa); }
.muted { color: var(--cocoa60); }
.small { font-size: 0.9rem; }
.card {
  background: var(--eggshell);
  border: 1px solid var(--linen);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.points {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--tomato);
  margin: 0;
}
.handle {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  background: var(--linen);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  display: inline-block;
  user-select: all;
}
.btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--tomato);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.25rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.75rem;
}
.btn.secondary { background: transparent; color: var(--cocoa); border: 1px solid var(--linen); }
.btn.quiet { background: transparent; color: var(--cocoa60); font-weight: 400; font-size: 0.9rem; }
a { color: var(--powder-deep); }
footer { margin-top: 3rem; font-size: 0.85rem; color: var(--cocoa60); }
footer a { color: var(--cocoa60); }