/* Additions that belong to the product landing page alone.
 *
 * Loaded after the block stylesheets, so a rule here can settle a tie with
 * one of theirs on source order rather than by being made more specific.
 */

/* ===== Counter Scroll CTA =====
 *
 * Counter Scroll ships no CTA of its own -- unlike Kinetic Headline, Flip
 * Cards and Scroll Reveal Text, which is why the designer's mockup has none
 * and why the demo page had nothing linking to it. This adds one here only.
 *
 * The block's background is a flat --cs-bg-color, so the extra height below
 * the stats is the same colour as everything above it and the join is
 * invisible. It would not be if the block were using a background image.
 */
.cs-cta {
  /* The block grows by this plus the button's own height -- roughly the 80px
     the layout calls for, in rem so it tracks the theme scale like the rest. */
  margin-top: 2.5rem;
  text-align: center;
}

/* Colour and hover are Flip Cards' button treatment exactly: transparent
   fill, a hairline in the accent, and a second inset pixel on hover instead
   of a fill, so the button does not jump. Size, radius, face and tracking all
   come from .button in base.css, which is the same class Flip Cards extends.
   Bound to the block's own accent rather than a literal #ff8820: it is the
   same colour today, and stays right if the block's settings change. */
.cs-cta__button {
  background: transparent;
  color: var(--cs-number-color, #ff8820);
  border: 1px solid var(--cs-number-color, #ff8820);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.cs-cta__button:hover,
.cs-cta__button:focus-visible {
  background-color: transparent;
  color: var(--cs-number-color, #ff8820);
  box-shadow: inset 0 0 0 2px var(--cs-number-color, #ff8820);
}