/* dev-doc: 2026-09-17 10:55 scribble-browser-agent-interface */
/*
 * Homepage agent promotion, sitting under the hero CTAs.
 *
 * It used to be a bordered, gradient-filled card, which read as an ad pasted onto the hero: the
 * hero itself is borderless on white, and nothing else above the fold is boxed. This version keeps
 * the same content but joins the hero's rhythm instead of fighting it - a hairline rule for
 * separation, the hero's own type sizes, and compact actions that cannot be mistaken for the
 * primary CTA above.
 *
 * Colours are the site's: #2152c4 is .btn--blue, #172c43/#53627a are the hero's heading and body.
 */
.hero .agent-promo {
  display: block;
  max-width: 490px;
  margin-top: 26px;
  padding-top: 20px;
  /* Separation by rule, not by box. */
  border-top: 1px solid #e3e9f3;
  color: #273550;
  /* Agent brand marks. Muted on purpose: they are a trust signal, not a logo wall, and the hero
     already carries the customer logo row further down the page. */
  /* Brand marks, inline at the end of the heading. NO margin-top and NO wrap: this block used to
     be its own row under the heading, and the leftover 11px top margin survived the move inline,
     which pushed the logos 6px below the heading text inside a flex row that was otherwise centring
     them correctly. Wrapping is off for the same reason: a logo dropping to a second line inside a
     heading reads as broken rather than as a wrap. */
  /* Copy-the-prompt action. Quieter than the primary button because it is for the minority of
     visitors who already have an agent open, but it still has to read as pressable, so it keeps a
     border rather than becoming a third text link next to Read more. */
  /* Announcement target for the aria-live region; never shown, because the button label already
     changes for sighted users. */
}
.hero .agent-promo .agent-promo__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #172c43;
}
.hero .agent-promo .agent-promo__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #2152c4;
}
.hero .agent-promo p {
  margin: 9px 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #53627a;
}
.hero .agent-promo .agent-promo__brands {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  line-height: 1;
}
.hero .agent-promo .agent-promo__brands img {
  display: block;
  /* Matches the width/height attributes on the markup: letting CSS disagree with the intrinsic
     attributes resamples an 18px SVG at 20px for no reason. */
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.hero .agent-promo .agent-promo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.hero .agent-promo .agent-promo__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #2152c4;
  text-decoration: none;
}
.hero .agent-promo .agent-promo__more:hover, .hero .agent-promo .agent-promo__more:focus {
  text-decoration: underline;
}
.hero .agent-promo .agent-promo__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #ccd8ef;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #2152c4;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  /* Confirmed state. Green rather than the brand blue: the point is "that worked", and a colour
     change the user already associates with the button does not read as a state change. */
}
.hero .agent-promo .agent-promo__copy:hover, .hero .agent-promo .agent-promo__copy:focus {
  border-color: #2152c4;
  background: #f3f7ff;
}
.hero .agent-promo .agent-promo__copy.is-copied {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.hero .agent-promo .agent-promo__copy-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}
.hero .agent-promo .agent-promo__copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero .agent-promo .agent-promo__copy:focus-visible,
.hero .agent-promo .agent-promo__more:focus-visible {
  outline: 3px solid #2152c4;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .hero .agent-promo {
    margin-top: 22px;
    padding-top: 18px;
    max-width: 100%;
  }
}