.renato-fst-wrap {
  --renato-blue: #4B76BA;
  --renato-blue-2: #0f4c9d;
  --renato-dark: #0b1730;
  --renato-dark-2: #10284f;
  --renato-cyan: #5fb4ff;
  --renato-white: #ffffff;
  --renato-border: rgba(255,255,255,.14);
  --renato-soft-border: rgba(18, 37, 70, .10);
  --renato-surface: rgba(255,255,255,.08);
  --renato-text-soft: rgba(255,255,255,.78);
  --renato-paper: #ffffff;
  --renato-paper-text: #1d2b45;
  --renato-paper-soft: #61708a;
  --renato-amber: #f3a11d;
  --renato-green: #1ebc73;
  color: var(--renato-white) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  max-width: 980px;
  margin: 0 auto;
}

.renato-fst-wrap,
.renato-fst-wrap * ,
.renato-fst-wrap *::before,
.renato-fst-wrap *::after {
  box-sizing: border-box;
}

.renato-fst-wrap :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, label, li, ul, ol, a, button, div) {
  color: inherit !important;
}

.renato-fst-wrap button,
.renato-fst-wrap input,
.renato-fst-wrap select,
.renato-fst-wrap textarea {
  font: inherit;
}

.renato-fst-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(95,180,255,.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(135deg, #08152c 0%, #0b2347 42%, #10386d 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 32px;
  padding: 34px;
  box-shadow: 0 30px 80px rgba(5, 17, 39, .38);
}

.renato-fst-card:before,
.renato-fst-card:after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.renato-fst-card:before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 24%, transparent 76%, rgba(255,255,255,.04));
}

.renato-fst-card:after {
  width: 460px;
  height: 460px;
  left: -120px;
  bottom: -240px;
  background: radial-gradient(circle at center, rgba(255,255,255,.16), rgba(255,255,255,.04) 28%, transparent 58%);
  filter: blur(8px);
}


.renato-fst-card :where(a, button) {
  text-decoration: none;
}

.renato-fst-gate,
.renato-fst-result {
  color: var(--renato-paper-text) !important;
}

.renato-fst-gate :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, label, li, ul, ol, a, button, div),
.renato-fst-result :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, label, li, ul, ol, a, button, div) {
  color: inherit !important;
}

.renato-fst-field input::placeholder {
  color: #7d8ba3 !important;
  opacity: 1;
}


.renato-fst-header,
.renato-fst-progress,
.renato-fst-progress-text,
.renato-fst-quiz-screen,
.renato-fst-nav {
  position: relative;
  z-index: 1;
}

.renato-fst-header {
  margin-bottom: 26px;
}

.renato-fst-card.renato-fst-header-compact .renato-fst-header {
  margin-bottom: 14px;
}

.renato-fst-card.renato-fst-header-compact .renato-fst-title,
.renato-fst-card.renato-fst-header-compact .renato-fst-subtitle {
  display: none;
}

.renato-fst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dcecff !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 11px;
  padding: 9px 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.renato-fst-eyebrow:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--renato-cyan);
  box-shadow: 0 0 16px rgba(95,180,255,.85);
}

.renato-fst-title {
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 12px;
  max-width: 620px;
}

.renato-fst-subtitle {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: var(--renato-text-soft) !important;
  max-width: 720px;
}

.renato-fst-progress {
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  margin: 26px 0 10px;
  border: 1px solid rgba(255,255,255,.08);
}

.renato-fst-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #46a6ff 0%, #6ac0ff 48%, #94d4ff 100%);
  box-shadow: 0 0 18px rgba(95,180,255,.35);
  transition: width .25s ease;
}

.renato-fst-progress-text {
  font-size: 13px;
  color: rgba(255,255,255,.72) !important;
  margin-bottom: 26px;
  letter-spacing: .03em;
}

.renato-fst-question-wrap,
.renato-fst-gate,
.renato-fst-result {
  position: relative;
  border-radius: 28px;
}

.renato-fst-question-wrap {
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}

.renato-fst-step-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: #d7e9ff !important;
  margin-bottom: 16px;
}

.renato-fst-step-label:before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,.45);
}

.renato-fst-question {
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  max-width: 760px;
}

.renato-fst-answers {
  display: grid;
  gap: 14px;
}

.renato-fst-answer {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(6, 20, 45, .42);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
}

.renato-fst-answer:hover {
  border-color: rgba(111,181,255,.65);
  background: rgba(10, 29, 59, .68);
  transform: translateY(-1px);
}

.renato-fst-answer.selected {
  border-color: rgba(120, 194, 255, .95);
  background: linear-gradient(180deg, rgba(42,119,206,.38), rgba(14,53,105,.42));
  box-shadow: 0 16px 28px rgba(2, 13, 31, .28), inset 0 1px 0 rgba(255,255,255,.08);
}

.renato-fst-answer input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.renato-fst-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  box-sizing: border-box;
  position: relative;
}

.renato-fst-answer.selected .renato-fst-radio {
  border-color: #a8daff;
  box-shadow: 0 0 0 4px rgba(95,180,255,.12);
}

.renato-fst-answer.selected .renato-fst-radio:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #b5e3ff;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}

.renato-fst-answer-text {
  font-size: 17px;
  line-height: 1.55;
  color: #f7fbff !important;
}

.renato-fst-nav,
.renato-fst-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.renato-fst-nav {
  margin-top: 28px;
  justify-content: space-between;
}

.renato-fst-btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.renato-fst-btn:hover { transform: translateY(-1px); }
.renato-fst-btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.renato-fst-btn-primary {
  background: linear-gradient(180deg, #2f95ff 0%, #1870d6 100%);
  color: #fff !important;
  box-shadow: 0 16px 28px rgba(14, 70, 140, .35), inset 0 1px 0 rgba(255,255,255,.18);
}

.renato-fst-btn-primary:hover {
  box-shadow: 0 18px 30px rgba(14, 70, 140, .42), inset 0 1px 0 rgba(255,255,255,.22);
}

.renato-fst-btn-secondary {
  background: rgba(255,255,255,.10);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12);
}

.renato-fst-btn-secondary:hover {
  background: rgba(255,255,255,.14);
}

.renato-fst-btn-link {
  background: transparent;
  color: var(--renato-blue-2) !important;
  padding-left: 0;
  padding-right: 0;
}

.renato-fst-gate {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.95));
  color: var(--renato-paper-text) !important;
  border: 1px solid var(--renato-soft-border);
  box-shadow: 0 24px 60px rgba(8, 25, 51, .20);
  padding: 32px;
  max-width: 680px;
  margin: 0 auto;
}

.renato-fst-gate-title,
.renato-fst-result-title {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.renato-fst-gate-subtitle,
.renato-fst-result-description,
.renato-fst-bridge-text,
.renato-fst-results-notice {
  font-size: 17px;
  line-height: 1.72;
  color: var(--renato-paper-soft) !important;
}

.renato-fst-gate .renato-fst-step-label {
  color: #5d6f8f !important;
}
.renato-fst-gate .renato-fst-step-label:before {
  background: rgba(29, 43, 69, .24);
}

.renato-fst-gate-form {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.renato-fst-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #23324e !important;
}

.renato-fst-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  padding: 15px 15px;
  font-size: 16px;
  color: #1d2b45 !important;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(11, 23, 48, .03);
}

.renato-fst-field input:focus {
  outline: none;
  border-color: #7db7f0;
  box-shadow: 0 0 0 4px rgba(75,118,186,.12);
}

.renato-fst-form-message {
  min-height: 24px;
  color: #8a2f2f !important;
  font-size: 14px;
}

.renato-fst-result {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--renato-paper-text) !important;
  border: 1px solid var(--renato-soft-border);
  box-shadow: 0 28px 64px rgba(8, 25, 51, .24);
  padding: 34px;
  max-width: 760px;
  margin: 0 auto;
}

.renato-fst-result-top {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

.renato-fst-score-card,
.renato-fst-stage-card {
  border-radius: 22px;
  border: 1px solid #e5edf7;
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  padding: 22px 24px;
}

.renato-fst-score-label,
.renato-fst-stage-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: #5d6f8f !important;
  margin-bottom: 8px;
}

.renato-fst-score-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.renato-fst-score-value strong {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.04em;
  color: #0f2950 !important;
}

.renato-fst-score-value span {
  font-size: 17px;
  color: #5d6f8f !important;
  font-weight: 700;
}

.renato-fst-score-range {
  margin-top: 10px;
  font-size: 14px;
  color: #6e809b !important;
}

.renato-fst-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #fff !important;
  background: linear-gradient(90deg, #f5a41b, #ffbf4d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.renato-fst-stage-pill.is-green {
  background: linear-gradient(90deg, #0da864, #31cf8b);
}

.renato-fst-stage-card p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #61708a !important;
}

.renato-fst-result-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.renato-fst-result-kicker {
  color: var(--renato-blue-2) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 10px;
}

.renato-fst-result-block {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid #e6edf7;
  background: #f8fbff;
  line-height: 1.75;
  color: #22304c !important;
}

.renato-fst-revelation {
  background: linear-gradient(180deg, #eef5ff, #edf7ff);
  border-color: #d4e4fb;
}

.renato-fst-result-points {
  margin: 18px 0 4px;
  display: grid;
  gap: 12px;
}

.renato-fst-result-point {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7faff;
  border: 1px solid #e7eef8;
  color: #23324e !important;
}

.renato-fst-result-point-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2f95ff, #1870d6);
  box-shadow: 0 0 0 5px rgba(75,118,186,.10);
  margin-top: 6px;
}

.renato-fst-result-point-text {
  min-width: 0;
  line-height: 1.65;
  color: #23324e !important;
}

.renato-fst-stage-rail {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid #e6edf7;
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
}

.renato-fst-stage-rail-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5d6f8f !important;
  margin-bottom: 12px;
}

.renato-fst-stage-rail-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.renato-fst-stage-segment {
  padding: 12px 10px;
  border-radius: 14px;
  background: #eef3fa;
  border: 1px solid #e3ebf6;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  color: #65758f !important;
}

.renato-fst-stage-segment.active {
  color: #fff !important;
  background: linear-gradient(90deg, #f5a41b, #ffbf4d);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(243,161,29,.20);
}

.renato-fst-stage-segment.active.is-green {
  background: linear-gradient(90deg, #0da864, #31cf8b);
  box-shadow: 0 10px 20px rgba(13,168,100,.18);
}

.renato-fst-bridge {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e7eef8;
}

.renato-fst-bridge-card {
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid #e6edf7;
  background: linear-gradient(180deg, #fbfdff, #f6faff);
}

.renato-fst-results-notice {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .renato-fst-title { font-size: 36px; }
  .renato-fst-question { font-size: 28px; }
  .renato-fst-result-top { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .renato-fst-card { padding: 22px; border-radius: 24px; }
  .renato-fst-question-wrap, .renato-fst-gate, .renato-fst-result { padding: 22px; border-radius: 22px; }
  .renato-fst-title,
  .renato-fst-question,
  .renato-fst-gate-title,
  .renato-fst-result-title { font-size: 26px; }
  .renato-fst-answer-text,
  .renato-fst-subtitle,
  .renato-fst-gate-subtitle,
  .renato-fst-result-description,
  .renato-fst-bridge-text,
  .renato-fst-results-notice { font-size: 16px; }
  .renato-fst-nav { justify-content: stretch; }
  .renato-fst-nav .renato-fst-btn,
  .renato-fst-ctas .renato-fst-btn { width: 100%; text-align: center; }
  .renato-fst-stage-rail-track { grid-template-columns: 1fr; }
  .renato-fst-score-value strong { font-size: 40px; }
}