/* Local tweaks on top of the imported agentic.salespeak.ai styles. Loaded
   AFTER the original stylesheets in src/raw/agent-optimizer.head.html, so these
   rules win on equal specificity by source order. */

/* Hero buttons (Book a demo / See your agent traffic, free) — full pill, to
   match the home page nav buttons. */
.ao .btn,
.ao .btn.btn-ghost {
  border-radius: 999px;
}

/* Proof-card panels (TODAY · ... / AFTER AGENT OPTIMIZER) — noticeably rounder
   corners than the imported 4px. */
.ao .poc-panel,
.ao .poc-panel.before,
.ao .poc-panel.after {
  border-radius: 20px;
}

/* "The answer you want" chip — was pinned to the right edge of the after-card
   (left: 121px; right: 24px). Center it on the top edge instead. */
.ao .poc-panel.after .pick {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  /* The original `right: 24px` was implicitly forcing the chip wider than its
     content; without it the chip shrinks and the text wraps. Keep one line. */
  white-space: nowrap;
}

/* The after-card's top gradient strip (::before) — match the .fw .top-strip
   look from the "How it works" flywheel cards. The .poc-panel.after has a 2.5px
   dark border (var(--ink)); positioning the strip at top/left/right: 0 would
   leave it INSIDE the border, with a visible step where the dark border crosses
   the strip's corner curve. Push the strip out by the border width so its
   outer rounded corners hug the card's outer rounded corners exactly, and bump
   the height to 16px (was 5px) — at 5px the corner radius is clamped by the
   strip's own height to ~5px, way short of the card's 20px curve, leaving a
   visible "lip". With 16px height + a generous border-radius the strip's curve
   has room to follow the card's outer curve smoothly. */
.ao .poc-panel.after::before {
  top: -2.5px;
  left: -2.5px;
  right: -2.5px;
  height: 16px;
  border-radius: 100px 100px 0 0;
}

/* "During." display heading on the WRITE PATH card — the imported style sets
   line-height: 1 + background-clip: text on the gradient text fill, which
   clips the descender on the "g" in some browsers (the gradient-clipped glyph
   rendering uses the line box as its bound). A nudge of padding-bottom gives
   the descender room without changing the visual rhythm. */
.ao .da-col.during .when {
  padding-bottom: 0.08em;
}