/* ================================================================
   Program finder — shared styles for the "which program is right
   for me? → talk to Rebecca" widget. Rendered by finder.js from a
   per-page window.RebeccaFinder config. Navy band; white card pops.
   ================================================================ */
.re-picker { padding: 96px 0; background: var(--teal-100); }
.re-picker-head { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.re-picker-head .eyebrow { color: var(--teal-600); }
.re-picker-head h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 560, 'SOFT' 0, 'opsz' 72;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--navy-700); margin: 8px 0 8px;
}
.re-picker-head h2 em { font-style: italic; color: var(--teal-600); font-variation-settings: 'wght' 460, 'SOFT' 0, 'opsz' 72; }
.re-picker-head p { color: var(--navy-500); font: 400 16.5px/1.6 var(--font-body); margin: 0; }
.re-picker-card {
  background: #fff; border: 1px solid rgba(48, 69, 92, 0.08); border-top: 4px solid var(--teal-600);
  border-radius: 20px; padding: 32px; max-width: 880px; margin: 0 auto; box-shadow: 0 12px 36px rgba(48, 69, 92, 0.06);
}
@media (max-width: 700px) { .re-picker-card { padding: 24px; border-radius: 16px; border-top-width: 3px; } }
.re-picker-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px) { .re-picker-questions { grid-template-columns: 1fr; gap: 14px; } }
.re-picker-field { display: flex; flex-direction: column; gap: 8px; }
.re-picker-field label { font: 600 14.5px/1.35 var(--font-body); color: var(--navy-700); display: flex; align-items: flex-start; gap: 10px; min-height: 38px; }
.re-picker-field label .num {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(7, 196, 200, 0.12); color: var(--teal-600); font: 700 11px/1 var(--font-body); flex-shrink: 0; margin-top: 1px;
}
.re-picker-field select {
  appearance: none; -webkit-appearance: none; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2330455c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  border: 1.5px solid #a7b1c2; border-radius: 12px; padding: 16px 44px 16px 18px;
  font: 500 16px/1.3 var(--font-body); color: var(--navy-700); cursor: pointer; width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.re-picker-field select:hover { border-color: var(--teal-600); }
.re-picker-field select:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(7, 196, 200, 0.18); }
.re-picker-field select.picked { background-color: rgba(7, 196, 200, 0.06); border-color: var(--teal-600); font-weight: 600; }
.re-picker-field select[disabled] { background-color: #f5f6f8; color: #a7b1c2; cursor: not-allowed; border-color: rgba(167, 177, 194, 0.5); }
.re-picker-result {
  margin: 28px auto 0; max-width: 720px; background: #fff; border-radius: 20px; padding: 36px;
  box-shadow: 0 24px 60px rgba(48, 69, 92, 0.10); text-align: center; border-top: 4px solid var(--coral-600);
}
.re-picker-result .eyebrow { color: var(--coral-600); }
.re-picker-result .r-grade { font: 600 12px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-500); display: block; margin-bottom: 4px; }
.re-picker-result h3 {
  font-family: var(--font-display); font-variation-settings: 'wght' 560, 'SOFT' 0, 'opsz' 60;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--navy-700); margin: 8px 0 4px;
}
.re-picker-result .r-price { font-family: var(--font-display); font-variation-settings: 'wght' 540, 'SOFT' 0, 'opsz' 60; font-size: 32px; line-height: 1; color: var(--navy-700); margin-top: 12px; }
.re-picker-result .r-plan { font: 500 13.5px/1.4 var(--font-body); color: #63697a; margin: 4px 0 16px; }
.re-picker-result .r-why { font: 400 16px/1.55 var(--font-body); color: var(--navy-700); margin: 0 auto 8px; max-width: 560px; }
.re-picker-result .r-essay { font: italic 400 14.5px/1.55 var(--font-body); color: #63697a; margin: 0 auto 22px; max-width: 540px; }
.re-picker-result .r-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: center; }
.re-picker-result .r-actions .btn i { width: 17px; height: 17px; }
.re-picker-result .r-reset { background: none; border: none; color: var(--teal-600); font: 500 14px/1.4 var(--font-body); text-decoration: underline; cursor: pointer; padding: 0; }
.re-picker-result .r-foot { font: 400 13.5px/1.5 var(--font-body); color: #63697a; margin: 18px 0 0; }
.re-picker-result .r-foot a { color: var(--teal-600); }