/* One MyBest header at every width; the score gauge and tiles use results.css. */
.best-section {
  --best-accent: #ff895c;
  --best-heading-ink: #202b3e;
}

.best-section > #best-heading {
  display: flex;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  color: var(--best-heading-ink);
  font: 700 32px/1.15 var(--heading-font);
  letter-spacing: -.8px;
  white-space: nowrap;
}

.best-section > #best-heading em {
  font: inherit;
  font-style: italic;
}

.best-section > #best-heading sup {
  position: static;
  align-self: flex-start;
  margin: 2px 1px 0 0;
  font: 700 22px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.5px;
}

.best-section > #best-heading > span { font-style: normal; }

.best-section .best-card {
  padding: 16px;
  border: 1px solid var(--best-accent);
  border-radius: 8px;
}

.best-section .best-card-heading {
  position: relative;
  padding: 2px 0 10px 34px;
  border-bottom: 1px solid var(--best-accent);
  color: var(--best-heading-ink);
}

.best-section .best-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 22px;
  height: 36px;
  color: var(--best-accent);
}

.best-section .best-card-heading > h3 {
  display: block;
  margin: 0 0 4px;
  font: 700 18px/26px Arial, Helvetica, sans-serif;
  letter-spacing: -.35px;
}

.best-section .best-card-heading > .best-description {
  display: block;
  margin: 0;
  font: 400 16px/24px Arial, Helvetica, sans-serif;
  letter-spacing: normal;
}

/* The former compact desktop sentence must not reappear alongside the header. */
.best-section .best-card-heading > .best-desktop-description { display: none; }

@media (max-width: 999px) {
  .best-section > #best-heading {
    margin-bottom: 14px;
    font-size: 32px;
    letter-spacing: -.8px;
  }
  .best-section > #best-heading sup { font-size: 22px; }
  .best-section .best-card-heading > h3 { font-size: 18px; line-height: 26px; letter-spacing: -.35px; }
  .best-section .best-card-heading > .best-description { font-size: 16px; line-height: 24px; letter-spacing: normal; }
}

@media (max-width: 699px) {
  .best-section > #best-heading {
    margin-bottom: 12px;
    font-size: 30px;
    letter-spacing: -.7px;
  }
  .best-section > #best-heading sup { margin-top: 2px; font-size: 20px; }
  .best-section .best-card { padding: 14px 13px; border-radius: 8px; }
  .best-section .best-card-heading { padding: 1px 0 10px 30px; }
  .best-section .best-ribbon { width: 20px; height: 33px; }
  .best-section .best-card-heading > h3 { margin-bottom: 4px; font-size: 17px; line-height: 23px; letter-spacing: -.3px; }
  .best-section .best-card-heading > .best-description { font-size: 14px; line-height: 21px; letter-spacing: normal; }
}