/* Embed examples shared by the Answer Agent and customer support pages. */
.hd-embed-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 48px;
}
.hd-embed-showcase > * { min-width: 0; }
.hd-embed-showcase h3 { margin-top: 0; }
.hd-embed-points { padding-left: 20px; color: #655f59; line-height: 1.7; }
.hd-embed-points li + li { margin-top: 10px; }
.hd-embed-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9d1c9;
  border-radius: 14px;
  background: #fffdfa;
  box-shadow: 0 16px 40px rgb(38 28 18 / 6%);
}
.hd-embed-shot__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f8f7f4;
  isolation: isolate;
}
.hd-embed-shot__link img {
  display: block;
  max-width: none;
  height: auto;
}
/* Frame the supplied screenshots around the widget without altering the source. */
.hd-embed-shot--website { aspect-ratio: 850 / 935; }
.hd-embed-shot--website img { width: 240.9412%; margin-left: -70.5882%; margin-top: -22.3529%; }
.hd-embed-shot--product { aspect-ratio: 800 / 942; }
.hd-embed-shot--product img { width: 256%; margin-left: -156%; margin-top: -16.25%; }
.hd-embed-shot__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 9px 13px;
  border: 1px solid #d9d1c9;
  border-radius: 6px;
  background: #fffdfa;
  color: #171513;
  font: 600 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
}
.hd-embed-shot figcaption { padding: 16px 18px; border-top: 1px solid #d9d1c9; color: #655f59; font-size: 13px; line-height: 1.6; }
.hd-embed-sources { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.hd-embed-sources span { padding: 6px 12px; border: 1px solid #d9d1c9; border-radius: 5px; color: #655f59; font-size: 13px; }
.hd-embed-table-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid #d9d1c9; border-radius: 10px; }
.hd-embed-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.6; }
.hd-embed-table caption { padding: 18px 20px; color: #655f59; text-align: left; }
.hd-embed-table th, .hd-embed-table td { padding: 18px 20px; vertical-align: top; border-top: 1px solid #d9d1c9; }
.hd-embed-table thead th { background: #fff0e5; color: #171513; }
.hd-embed-table tbody th { width: 28%; font-weight: 600; }
.hd-embed-table td { color: #655f59; }
.hd-embed-dialog { width: min(1440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 52px 16px 16px; border: 1px solid #d9d1c9; border-radius: 12px; background: #fffdfa; }
.hd-embed-dialog::backdrop { background: rgb(23 21 19 / 75%); }
.hd-embed-dialog img { display: block; width: 100%; height: auto; }
.hd-embed-dialog__close { position: absolute; top: 8px; right: 10px; min-width: 44px; min-height: 36px; padding: 6px 12px; border: 1px solid #d9d1c9; border-radius: 6px; background: #fffdfa; color: #171513; cursor: pointer; font: 600 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
body:has(.hd-embed-dialog[open]) { overflow: hidden; }
.hd-embed-shot__link:focus-visible, .hd-embed-dialog__close:focus-visible { outline: 3px solid #b94400; outline-offset: -4px; }
.hd-embed-showcase .hd-embed-link, .hd-embed-showcase .fp-text-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 800px) {
  .hd-embed-showcase { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 28px; }
  .hd-embed-shot { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hd-embed-table { font-size: 13px; }
  .hd-embed-table th, .hd-embed-table td { padding: 14px 10px; overflow-wrap: anywhere; }
  .hd-embed-table caption { padding: 16px 12px; }
  .hd-embed-shot figcaption { padding: 13px 15px; }
  .hd-embed-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding-inline: 8px; }
}