/* Shared "sample concept" banner for the example sites. Uses system fonts so it looks
   the same on every sample and never borrows the sample's own styling. */
.rr-sample {
  background: #123f3c; color: #f6f1e7;
  font: 600 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 4px 16px;
  align-items: center; justify-content: space-between;
  border-bottom: 4px solid #e9a15f;
}
.rr-sample strong { color: #e9a15f; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.rr-sample a { color: #f6f1e7; display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: 3px; }
.rr-sample a:hover { color: #e9a15f; }
.rr-sample a:focus-visible { outline: 3px solid #e9a15f; outline-offset: 2px; }
.rr-skip { position: absolute; left: 8px; top: -60px; background: #123f3c; color: #fff; padding: 8px 12px; z-index: 10; }
.rr-skip:focus { top: 8px; }
.rr-credit {
  background: #123f3c; color: #f6f1e7; text-align: center;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 18px 16px;
}
.rr-credit a { color: #e9a15f; }
.rr-sample p { margin: 0; }