/* Shared QR dimensions remain compatible with the existing ReliefShowcase. */
.yl-support-team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:700px;margin:auto}
.yl-support-team figure{margin:0;min-width:0;text-align:center}
.yl-support-team img{display:block;width:100%;max-width:280px;height:auto;object-fit:contain;margin:auto;background:white}
.yl-support-team figcaption{margin-top:12px;font-size:16px;line-height:1.6;overflow-wrap:anywhere}

.yl-support {
  --support-ink: #203537;
  --support-muted: #53615f;
  --support-line: #d9d3c8;
  --support-paper: #f0ede6;
  --support-gold: #806232;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 56px auto;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 48px;
  background: var(--support-paper);
  color: var(--support-ink);
  border-block: 1px solid var(--support-line);
}
.yl-support * { box-sizing: border-box; }
.yl-support-heading h2 {
  margin: 0 0 16px;
  color: var(--support-ink);
  font: 500 clamp(26px, 2.3vw, 34px)/1.5 var(--font-title, "PingFang SC", "Microsoft YaHei", sans-serif);
  text-wrap: balance;
}
.yl-support-heading p {
  max-width: 32em;
  margin: 0;
  color: var(--support-muted);
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.yl-support details { min-width: 0; border: 0; background: transparent; }
.yl-support summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  border: 1px solid var(--support-ink);
  border-radius: 4px;
  background: var(--support-ink);
  color: #fffdfa;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.yl-support summary::-webkit-details-marker { display: none; }
.yl-support summary:hover { background: #304c4e; }
.yl-support summary svg { flex: 0 0 22px; width: 22px; height: 22px; }
.yl-support .support-collapse,
.yl-support details[open] .support-expand { display: none; }
.yl-support details[open] .support-collapse { display: inline; }
.yl-support summary:focus-visible,
.yl-support a:focus-visible { outline: 2px solid var(--support-gold); outline-offset: 4px; }
.yl-support-panel { padding-top: 24px; }
.yl-support-panel > p {
  margin: 0 0 20px;
  color: var(--support-muted);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
.yl-support .yl-support-team { gap: 24px; }
.yl-support .yl-support-team img { max-width: 224px; }
.yl-support .yl-support-team figcaption { margin-top: 12px; font-size: 15px; }
.yl-support .yl-support-team figcaption span { display: block; }
.yl-support .yl-support-team a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 4px;
  color: var(--support-gold);
  font-size: 14px;
  text-underline-offset: 4px;
}
.yl-support .yl-support-team a:hover { color: var(--support-ink); }
.yl-support ::selection { color: var(--support-ink); background: #e4cfaa; }
@media (max-width: 900px) {
  .yl-support { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; margin-block: 40px; }
  .yl-support-heading p { max-width: 65ch; }
  .yl-support .yl-support-team { max-width: 560px; }
}
@media (max-width: 639px) {
  .yl-support { padding: 28px 20px; margin-block: 32px; }
  .yl-support-heading h2 { font-size: 26px; }
  .yl-support-team { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .yl-support .yl-support-team { gap: 24px; }
  .yl-support .yl-support-team figure + figure { padding-top: 24px; border-top: 1px solid var(--support-line); }
  .yl-support .yl-support-team img { width: 224px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .yl-support summary { transition: none; }
}