:root {
  --pd-red: #e8402e;
  --pd-yellow: #ffd21e;
  --pd-blue: #1a9bd7;
  --pd-green: #46b95c;
  --pd-purple: #9b5bd6;
  --pd-pink: #ff6fae;
  --pd-ink: #3a2a22;
  --pd-cream: #fff8ea;
  --pd-card: #ffffff;
}

body.home {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, #fff2b8 0 12%, transparent 12.5%),
    radial-gradient(circle at 88% 12%, #ffc6dd 0 10%, transparent 10.5%),
    radial-gradient(circle at 80% 85%, #bfe6ff 0 14%, transparent 14.5%),
    radial-gradient(circle at 18% 88%, #c9f0cf 0 12%, transparent 12.5%),
    var(--pd-cream);
  color: var(--pd-ink);
  font-family: "Baloo 2", "Nunito", "Segoe UI Rounded", "Comic Sans MS", system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fan {
  background: var(--pd-card);
  width: 100%;
  max-width: 620px;
  border-radius: 28px;
  padding: 32px 34px 22px;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.05), 0 26px 50px rgba(58, 42, 34, 0.18);
  border: 3px solid #fff;
}

.fan-logo { text-align: center; }
.fan-logo .brand { width: min(340px, 82%); height: auto; display: block; margin: 0 auto; }
.fan-logo .brandsub {
  margin: 10px 0 0;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pd-purple);
}

.lede {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 20px 2px 22px;
  text-align: center;
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card {
  border-radius: 18px;
  padding: 16px 14px;
  color: #fff;
  font-weight: 700;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}
.card small { font-weight: 700; opacity: 0.9; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }
.card.red { background: var(--pd-red); }
.card.blue { background: var(--pd-blue); }
.card.green { background: var(--pd-green); }
.card.yellow { background: var(--pd-yellow); color: var(--pd-ink); box-shadow: inset 0 -6px 0 rgba(0,0,0,0.08); }
.card.pink { background: var(--pd-pink); }
.card.purple { background: var(--pd-purple); }

.blurb { margin: 22px 2px; font-size: 1rem; font-weight: 500; }

.disclaimer {
  background: #fff4d6;
  border: 2px dashed var(--pd-yellow);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #6b4e1e;
  margin-top: 6px;
}
.disclaimer a {
  color: var(--pd-blue);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 3px solid var(--pd-yellow);
}
.disclaimer a:hover { color: var(--pd-red); }

.fan footer {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px solid #f0e6d0;
  color: #b9a98c;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#seal { cursor: default; user-select: none; }
#gateForm { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
#gateForm input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid #eadfc6;
  background: #fffdf7;
  font: inherit;
  color: var(--pd-ink);
}
#gateForm button {
  background: var(--pd-red);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 520px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .fan-logo h1 { font-size: 1.6rem; }
}