* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  background: radial-gradient(circle at 50% 20%, #3A2E8C, #1D174B 70%);
  min-height: 100vh;
}

.landing {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.hero .brand {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .5px;
}

.hero .byline {
  font-size: 15px;
  font-weight: 400;
  opacity: .85;
}

.hero h1 {
  margin-top: 40px;
  font-size: 44px;
  line-height: 1.15;
  max-width: 22ch;
}

.tagline {
  margin-top: 18px;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.55;
  opacity: .88;
}

.personas { margin-top: 56px; }
.personas h2 { font-size: 26px; }
.personas .hint { margin-top: 6px; opacity: .75; font-size: 15px; }

.cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.card {
  text-align: left;
  border: 1px solid rgba(127, 227, 255, .35);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  padding: 20px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  font: inherit;
}

.card:hover {
  transform: translateY(-3px);
  background: rgba(127, 227, 255, .1);
  border-color: rgba(127, 227, 255, .8);
}

.card .role { font-size: 18px; font-weight: 700; }
.card .who { margin-top: 4px; font-size: 13px; color: #7FE3FF; }
.card .blurb { margin-top: 12px; font-size: 14px; line-height: 1.45; opacity: .85; }
.card .locked { margin-top: 12px; font-size: 12px; opacity: .7; }

.notes { margin-top: 56px; opacity: .8; font-size: 14px; }
.notes h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.notes ul { margin-top: 10px; padding-left: 20px; display: grid; gap: 6px; }

.secondaryRow {
  margin-top: 48px;
  text-align: center;
}

.secondaryLink {
  font: inherit;
  font-size: 13px;
  background: none;
  border: none;
  color: #fff;
  opacity: .55;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 10px;
}

.secondaryLink:hover { opacity: .9; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 30, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.hidden, .error.hidden { display: none; }

.modal-card {
  background: #221A5E;
  border: 1px solid rgba(127, 227, 255, .45);
  border-radius: 14px;
  padding: 28px;
  width: min(420px, 100%);
}

.modal-card p { margin-top: 8px; font-size: 14px; opacity: .8; }

.modal-card input {
  margin-top: 18px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 15px;
}

.error { margin-top: 10px; color: #FF9E9E; font-size: 13px; }

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

button.primary, button.ghost {
  font: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

button.primary {
  background: #7FE3FF;
  color: #1D174B;
  border: none;
  font-weight: 700;
}

button.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}