/* Homepage "Found something good?" panel and the submit-a-find form. */
.find-panel {
  background: #FFF1E8;
  border-radius: 24px;
  padding: 36px 40px 28px;
  overflow: visible;
}
.find-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.find-panel h2 {
  margin: 0;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 750;
}
.find-panel .find-sub {
  margin: 10px 0 0;
  max-width: 520px;
  color: #5c5148;
  font-size: 17px;
  line-height: 1.5;
}
.find-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.find-text {
  color: #1e1916;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.find-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  overflow: visible;
}
.find-card {
  background: #fff;
  border: 1px solid #eadfd5;
  border-radius: 16px;
  padding: 16px 16px 14px;
  overflow: visible;
}
.find-id {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.find-id img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.find-id b { display: block; font-size: 15px; }
.find-id span { display: block; margin-top: 2px; color: #7a6b62; font-size: 13px; }
.find-why { margin: 12px 0 10px; font-size: 14px; line-height: 1.4; color: #3b322c; }
.find-rate { display: flex; align-items: center; gap: 8px; min-height: 22px; overflow: visible; }
.find-rate [data-tool-rating] { display: inline-flex; align-items: center; gap: 6px; }
.find-rate em { font-style: normal; font-weight: 650; font-size: 13px; }
.find-card:has(.rate-tip:hover, .rate-tip:focus, .rate-tip:focus-visible) { position: relative; z-index: 5; }
.rate-tip {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a776c;
  cursor: help;
  display: grid;
  place-items: center;
  z-index: 2;
}
.rate-tip:hover,
.rate-tip:focus,
.rate-tip:focus-visible { z-index: 6; }
.rate-tip .ico { width: 16px; height: 16px; }
.rate-tip-box {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: calc(100% + 8px);
  width: 220px;
  padding: 10px 12px;
  background: #1e1916;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  border-radius: 10px;
  text-align: left;
  z-index: 6;
  overflow-wrap: anywhere;
}
.rate-tip:hover .rate-tip-box,
.rate-tip:focus .rate-tip-box,
.rate-tip:focus-visible .rate-tip-box { display: block; }
body.breadly-home :is(a, button).btn.btn-peach.btn-flat,
body.breadly-home :is(a, button).btn.btn-peach.btn-flat:hover {
  background: #F97C50 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #3B1A0C !important;
}
body.breadly-home :is(a, button).btn.btn-peach.btn-flat:hover { background: #F26A3C !important; }
.find-top { align-items: flex-start; }
.find-form {
  display: grid;
  gap: 12px;
  flex: 1 1 420px;
  max-width: 480px;
  margin: 0;
}
.find-form label,
.find-stars { display: grid; gap: 6px; font-size: 14px; font-weight: 650; margin: 0; border: 0; padding: 0; }
.find-form input,
.find-form textarea {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eadfd5;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 450;
  color: #1e1916;
}
.find-form input { height: 48px; }
.find-form textarea { min-height: 96px; resize: vertical; }
.find-star-row { display: flex; gap: 4px; }
.find-star-row button {
  width: 36px;
  height: 36px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #e7d3c4;
}
.find-star-row button svg { width: 28px; height: 28px; fill: currentColor; }
.find-star-row button.is-on { color: #F97C50; }
.find-form .btn-flat { justify-self: start; height: 48px; padding: 0 22px; }
.find-note { margin: 0; color: #7a6b62; font-size: 13px; line-height: 1.45; font-weight: 450; }
.find-thanks { flex: 1 1 420px; max-width: 480px; align-self: center; }
.find-thanks p { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
.find-err { color: #A3261B; font-size: 14px; font-weight: 650; margin: 0; }
@media (max-width: 900px) {
  .find-top { flex-direction: column; }
  .find-form, .find-thanks { max-width: none; width: 100%; }
}