/* Scene 8 — Referral. One question, one ask, one scannable list of
   categories, one unmistakable takeaway. */

.rf .scene-scrim {
  background: radial-gradient(80% 60% at 50% 8%, rgba(228, 193, 105, .10) 0%, transparent 60%),
              linear-gradient(180deg, #0E100C 0%, #0B0C0A 100%);
}

.rf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  gap: clamp(12px, 2vh, 26px);
  max-width: 1100px;
  margin: 0 auto;
}

.rf-question { max-width: 22ch; }

/* ------------------------------------------------------------------- ask */
.rf-ask {
  max-width: 70ch;
  text-align: left;
}
.rf-ask-text { max-width: none; }

/* the qualifying criterion, highlighted wherever it appears */
.rf-hot {
  display: inline-block;
  padding: .04em .35em;
  border-radius: .3em;
  background: rgba(228, 193, 105, .16);
  color: var(--gold-hi);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(228, 193, 105, .55);
}

/* -------------------------------------------------------------- categories */
.rf-cats-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  max-width: 1020px;
}

.rf-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55em;
}

.rf-chip-hot {
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(228, 193, 105, .35), 0 0 26px rgba(228, 193, 105, .3);
}

.rf-cats-empty {
  font-size: clamp(13px, .95vw, 17px);
  color: var(--paper-faint);
  font-style: italic;
}

/* --------------------------------------------------------------- the takeaway */
.rf-ideal {
  border-top: 3px solid var(--gold);
  max-width: 64ch;
  margin: 0 auto;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.rf-ideal .panel-title { color: var(--gold); }
.rf-callout {
  max-width: none;
  margin: 0 auto;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .rf-ask { max-width: 90vw; }
  .rf-cats-wrap { max-width: 92vw; }
  .rf-ideal { max-width: 90vw; }
}

@media (max-width: 700px) {
  .rf-ask { text-align: left; padding: clamp(14px, 4vw, 22px); }
}