:root {
  --product-accent: #f5b400;
  --product-accent-soft: rgba(245, 180, 0, .18);
}

.placeholder-page {
  background:
    radial-gradient(circle at 82% 10%, var(--product-accent-soft), transparent 30%),
    #110817;
}

.placeholder-brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #151517;
  background: var(--product-accent);
  border-radius: 10px;
  font: 900 12px/1 "Manrope", sans-serif;
  letter-spacing: -.06em;
}

.placeholder-page .eyebrow,
.placeholder-page .card > span {
  color: var(--product-accent);
}

.placeholder-page .hero {
  min-height: calc(100vh - 68px);
}

.placeholder-page .hero h1 {
  max-width: 1120px;
}

.status-row {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.status-row span {
  padding: 9px 12px;
  color: #e8dfea;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.placeholder-note {
  margin-top: 42px;
  padding: 22px 24px;
  max-width: 760px;
  color: #c5b9ca;
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--product-accent);
  border-radius: 0 12px 12px 0;
  font-size: 13px;
  line-height: 1.65;
}

.firstcook-page {
  --product-accent: #ffd84a;
  --product-accent-soft: rgba(255, 216, 74, .16);
}

.firstcook-page .placeholder-brand-mark {
  color: #ffd84a;
  background: #242428;
  border: 1px solid rgba(255,216,74,.45);
}

.lifekeep-page {
  --product-accent: #b989ff;
  --product-accent-soft: rgba(185, 137, 255, .2);
}

.lifekeep-page .placeholder-brand-mark {
  color: #ffd84a;
  background: linear-gradient(145deg, #7b38b4, #2a1136);
}

@media (max-width: 600px) {
  .placeholder-page .hero { min-height: calc(100vh - 68px); }
}