/* Editorial additions to the current native detail template. Layout, shell and art stay shared. */
.uc-directory-detail .uc-detail-intro {
  max-width: 700px;
  margin: 20px auto 0;
  font: 400 var(--artie-type-lead, 18px)/1.6 var(--artie-font-body, HelveticaNow, Arial, sans-serif);
  color: #f7f5ed;
  text-wrap: pretty;
}
.uc-directory-detail .uc-detail-owner {
  margin: 12px 0 0;
  font-size: 14px;
  color: #f7f5ed;
}
.uc-directory-detail .uc-detail-owner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.uc-directory-detail .uc-slack-messages {
  height: auto;
  min-height: 260px;
}
.uc-directory-detail .uc-slack-messages > .uc-slack-message {
  margin-top: 22px;
}
.uc-directory-detail .uc-detail-example-label {
  font: 500 12px/1.5 var(--artie-font-body, HelveticaNow, Arial, sans-serif);
  letter-spacing: 0.035em;
  color: #716774;
  margin: 0 0 14px;
}
.uc-directory-detail .uc-detail-example-link {
  display: inline-block;
  margin-top: 14px;
  color: #574063;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.uc-directory-detail .uc-detail-output {
  padding: 28px;
  border: 1px solid #dcd5df;
  border-radius: 16px;
  background: #fffdfb;
  color: #302b33;
  font: 400 16px/1.6 var(--artie-font-body, HelveticaNow, Arial, sans-serif);
}
.uc-directory-detail .uc-detail-output h3 {
  font: 400 28px/1.2 var(--heading);
  margin: 0 0 20px;
}
.uc-directory-detail .uc-detail-output p {
  margin: 0 0 16px;
}
.uc-directory-detail .uc-detail-output dl {
  margin: 24px 0 0;
}
.uc-directory-detail .uc-detail-output dl > div {
  border-top: 1px solid #e5dfe7;
  padding-top: 16px;
  margin-top: 16px;
}
.uc-directory-detail .uc-detail-output dt,
.uc-directory-detail .uc-detail-apps dt {
  font-weight: 500;
  margin-bottom: 6px;
}
.uc-directory-detail .uc-detail-output dd,
.uc-directory-detail .uc-detail-apps dd {
  margin: 0;
  color: #655d69;
}
.uc-directory-detail .uc-detail-apps {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 40px auto 0;
  text-align: left;
  font: 400 17px/1.65 var(--artie-font-body, HelveticaNow, Arial, sans-serif);
}
.uc-directory-detail .uc-detail-apps > div {
  padding: 22px 0;
  border-top: 1px solid #302b3326;
}
/* The closing scene tints the page and flips --page-bg and --story-ink, so the FAQ keeps the
   light site surface and ink (.site-pages --page-bg/--ink) as its own solid panel. */
.uc-directory-detail .uc-detail-faq {
  max-width: 850px;
  margin: 28px auto;
  padding: 64px 32px 80px;
  position: relative;
  z-index: 2;
  border-radius: 20px;
  background: #fcfbf8;
  color: #302b33;
}
.uc-directory-detail .uc-detail-faq h2 {
  font: 400 var(--artie-type-section, 48px)/var(--artie-leading-section, 1.12) var(--heading);
  letter-spacing: var(--artie-tracking-display, -0.035em);
  margin: 0 0 32px;
  text-wrap: balance;
}
.uc-directory-detail .uc-detail-faq details {
  border-top: 1px solid #302b3326;
  padding: 20px 0;
}
.uc-directory-detail .uc-detail-faq summary {
  cursor: pointer;
  font-size: 18px;
  line-height: 1.5;
}
.uc-directory-detail .uc-detail-faq details p {
  font-size: 16px;
  line-height: 1.65;
  color: #655d69;
  margin: 16px 0 0;
}
.uc-directory-detail .uc-detail-related {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
}
.uc-directory-detail .uc-detail-related a {
  color: #574063;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 15px;
  line-height: 1.6;
}
.uc-directory-detail :is(a, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
/* The setup assign scene is static here (no animation observer), so its sent brief and reply
   stay in flow and the window grows to fit them instead of clipping at the animated height. */
.uc-directory-detail .uc-setup .hn-window[data-use-case-hiring="assign"],
.uc-directory-detail .uc-setup .hn-window[data-use-case-hiring="assign"] .uc-live-hiring {
  height: auto;
}
.uc-directory-detail .uc-setup .uc-live-hiring > .hs-assign {
  height: auto;
  min-height: 320px;
  max-height: none;
}
.uc-directory-detail .uc-setup .uc-live-hiring .hs-assign .hs7-platform-exchange {
  position: relative;
  display: flow-root;
  padding-bottom: 24px;
}
.uc-directory-detail .uc-setup .uc-live-hiring .hs-assign[data-sent="true"] .hs7-handoff {
  position: relative;
  inset: auto;
  margin: 43px 57px 0 22%;
}
.uc-directory-detail .uc-setup .uc-live-hiring .hs-assign .hs7-message-spacing {
  display: none;
}
/* While the shared setup grid has three columns, the cards share one content-driven landscape
   row, so a taller assign scene keeps every step heading on the same line. */
@media (min-width: 901px) {
  .uc-directory-detail .uc-setup .hn-grid {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .uc-directory-detail .uc-setup .hn-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}
@media (max-width: 760px) {
  .uc-directory-detail .uc-detail-intro {
    font-size: 16px;
  }
  .uc-directory-detail .uc-detail-output {
    padding: 22px;
  }
  .uc-directory-detail .uc-detail-apps {
    font-size: 16px;
    margin: 28px 0 0;
  }
  .uc-directory-detail .uc-detail-faq {
    padding: 48px 24px 64px;
  }
  /* Each question and link is itself a 44px touch target; the trimmed details padding, answer
     margin, link row gap and nav margin keep the desktop text rhythm. */
  .uc-directory-detail .uc-detail-faq details {
    padding: 12px 0;
  }
  .uc-directory-detail .uc-detail-faq summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 8px;
  }
  .uc-directory-detail .uc-detail-faq details p {
    margin-top: 8px;
  }
  .uc-directory-detail .uc-detail-related {
    row-gap: 0;
    margin-top: 22px;
  }
  .uc-directory-detail .uc-detail-related a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  /* Match the closing panel inset; the shared .hl-section width would add the margins. */
  .uc-directory-detail .uc-detail-faq {
    width: auto;
    margin: 12px 10px;
    border-radius: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uc-directory-detail * {
    scroll-behavior: auto !important;
  }
}