/* Role/intent router — sits between hero and stats, light theme.
   Client-side classifier (assets/js/router.js) matches free-text
   into one of 9 access paths and renders a card-style response. */
.rr-sec {
  padding: 64px 0 40px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid rgba(8,42,87,.06);
}
.rr-head .kicker {
  color: var(--teal, #0F4C5C);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; text-align: center;
  display: block;
  margin-bottom: 10px;
}
.rr-head h2 {
  font-family: var(--serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #082A57);
}
.rr-head h2 .it { font-style: italic; color: var(--teal, #0F4C5C); }
.rr-form {
  display: flex;
  gap: 10px;
  max-width: 720px;
  margin: 28px auto 0;
  flex-wrap: wrap;
}
.rr-form #rr-input {
  flex: 1 1 340px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(8,42,87,.16);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink, #082A57);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.rr-form #rr-input:focus {
  outline: none;
  border-color: var(--teal, #0F4C5C);
  box-shadow: 0 0 0 3px rgba(15,76,92,.12);
}
.rr-form .btn { min-height: 48px; padding: 0 22px; }

/* Result card */
.rr-result {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(15,76,92,.24);
  border-left-width: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(8,42,87,.08);
  animation: rrIn 300ms ease both;
}
@keyframes rrIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.rr-result .rr-title {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal, #0F4C5C);
  background: rgba(15,76,92,.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.rr-result .rr-h {
  font-family: var(--serif, "Instrument Serif", Georgia, serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink, #082A57);
  margin: 4px 0 8px;
}
.rr-result .rr-blurb {
  color: var(--muted, #4b5b6f);
  line-height: 1.55;
  margin: 0 0 14px;
  font-size: 15px;
}
.rr-result .rr-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rr-result .rr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.rr-result .rr-link.primary {
  background: var(--teal, #0F4C5C);
  color: #fff;
}
.rr-result .rr-link.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,76,92,.24);
}
.rr-result .rr-link.secondary {
  color: var(--ink, #082A57);
  border: 1px solid rgba(8,42,87,.14);
  background: #fff;
}
.rr-result .rr-link.secondary:hover {
  background: #F7FAFC;
}
.rr-result[hidden] { display: none; }