.examples-block {
  margin-top: 64px;
  padding-top: 38px;
  border-top: 1px solid var(--line, #d9e2ec);
}

.examples-heading {
  display: block;
  margin: 0 0 1.8rem;
}

.examples-heading .eyebrow {
  margin: 0 0 .4rem;
  color: #1f5e9e;
  font: 700 clamp(1.3rem, 1.35vw, 1.5rem)/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.examples-heading h2 {
  margin: .2rem 0 0;
  color: #17212b;
  font: 700 clamp(1.6rem, 2.5vw, 2.5rem)/1.1 var(--display);
  letter-spacing: -.04em;
}

.example-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  border: 1px solid var(--line, #d9e2ec);
  border-radius: 14px;
  background: #f5f8fc;
  width: fit-content;
  max-width: 100%;
}

.example-tabs [role="tab"] {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #657386;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  padding: 10px 15px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.example-tabs [role="tab"]:hover { color: var(--ink, #18212c); }
.example-tabs [role="tab"][aria-selected="true"] {
  border-color: #d8e4f1;
  background: white;
  color: var(--blue, #2869a8);
  box-shadow: 0 2px 8px rgb(23 42 66 / 7%);
}
.example-tabs [role="tab"]:focus-visible { outline: 3px solid rgb(45 112 177 / 28%); outline-offset: 2px; }

.example-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--line, #d9e2ec);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(32 55 81 / 5%);
}

.example-panel[hidden] { display: none; }
.example-prompt,
.example-response {
  min-width: 0;
  padding: 24px;
  border-radius: 12px;
}
.example-prompt { background: #f3f7fc; }
.example-response { background: #fbfcfe; }
.example-label {
  display: block;
  margin-bottom: 11px;
  color: #65809c;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
}
.example-prompt > p,
.example-response > p,
.example-evidence > p {
  margin: 0;
  color: #263444;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.example-response > p strong { color: #1d5f9f; }
.example-evidence {
  margin-top: 23px;
  padding-top: 17px;
  border-top: 1px solid #e1e8f0;
}
.example-evidence .example-label { margin-bottom: 7px; }
.example-evidence > p { color: #647487; font-size: 14px; }
.options-label { margin-top: 22px; }
.example-options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.example-options li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 11px;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  background: #fff;
  color: #566577;
  font-size: 13px;
  line-height: 1.45;
}
.example-options li b { flex: 0 0 17px; color: #6f8091; }
.example-options li.correct-option { border-color: #a9c9e8; background: #eaf3fc; color: #244e77; }
.example-options li.correct-option b { color: #1d67a7; }

@media (max-width: 760px) {
  .examples-block { margin-top: 44px; padding-top: 30px; }
  .example-panel { grid-template-columns: 1fr; padding: 10px; }
  .example-prompt, .example-response { padding: 19px; }
}

@media (max-width: 480px) {
  .example-tabs { width: 100%; }
  .example-tabs [role="tab"] { flex: 1 1 100%; text-align: left; }
  .example-prompt > p, .example-response > p { font-size: 15px; }
}