/* Ported from the prototype's global .visually-hidden (index.css) — not available inside this component's Shadow DOM. */
.x7pI6GtrTkdiEN8LsKtt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Each word starts lower and transparent, then settles in, staggered by its index. */
.oAqVVt9oPEEOn9On4bWU {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition:
    opacity 700ms ease,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--delay, 0ms) + var(--i) * 28ms);
}

.SwIC5ZnOrH1XanoedF06[data-shown='true'] .oAqVVt9oPEEOn9On4bWU {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .oAqVVt9oPEEOn9On4bWU {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * Ported from the prototype's Footer.module.css (the call to action half; Figma 2937:8907 at
 * 1728 wide, sizes scale with the window above floors). The gutter is the standard one, capped
 * to --content-width, whatever the page sets.
 */
.Zt8XjT1gGAL1mKH7yMml,
.Zt8XjT1gGAL1mKH7yMml *,
.Zt8XjT1gGAL1mKH7yMml *::before,
.Zt8XjT1gGAL1mKH7yMml *::after {
  box-sizing: border-box;
}

/*
 * Brand blue, by the page gutter. Behind it, the background art (--cta-bg, set by the
 * component) against the right edge, centred top to bottom, at its design size: 304px wide (the
 * image is 1.5 times that, for sharp screens).
 */
.Zt8XjT1gGAL1mKH7yMml {
  --page-gutter: max(var(--page-gutter-min), (100vw - var(--content-width)) / 2);
  display: block;
  /* Top and bottom padding each carry half the heading's line spacing above its capitals (0.16 of its size,
     measured), which .title takes back, so the letters and the buttons sit centred, the band's height unchanged. */
  padding: calc(max(56px, 4.63vw) + 0.08 * var(--type-display-l-size)) var(--page-gutter);
  background: var(--cta-bg) right center / 304px auto no-repeat var(--action-primary-default);
  color: var(--text-inverse);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* 99 / 101px at 1728 (15% under Figma's 116 / 124), Light with the phrase SemiBold. */
/* (The line spacing above the capitals, given back to the band's padding: see .band.) */
.aj1SQD9jQS0TvhjupgAk {
  margin: calc(-0.16 * var(--type-display-l-size)) 0 0;
  font-size: var(--type-display-l-size);
  font-weight: var(--type-display-l-weight);
  line-height: var(--type-display-l-lh);
  letter-spacing: var(--type-display-l-ls);
}

.aj1SQD9jQS0TvhjupgAk strong {
  font-weight: 600;
}

.h2A4cCN5ctxvK0uA_8_a {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding-top: 32px;
}

/* Figma CTA (the prototype's lg button, which is the library Button's medium): ExtraBold at the fluid CTA size, 16px tall padding by 48px, 2.56px tracking. A long label wraps inside the button instead of pushing the page wider (.actions for the weight over Button's own). */
.h2A4cCN5ctxvK0uA_8_a .EQBElorkywjAVt65_5hY {
  max-width: 100%;
  padding: 16px 48px;
  font-size: var(--type-cta-size);
  font-weight: var(--type-cta-weight);
  letter-spacing: var(--type-cta-ls);
  white-space: normal;
}

.h2A4cCN5ctxvK0uA_8_a .EQBElorkywjAVt65_5hY:focus-visible {
  /* White on the blue band (the button's own currentColor ring is blue on the white pill); .actions raises it above Button's rule whatever the stylesheet order. */
  outline-color: #fff;
}

.Qp7zpxldpYAWcaTPZNUu {
  display: inline-flex;
  max-width: 100%;
}

/* Intro (data-shown, set once in view): after the heading's words, each button rises and fades in (--d). */
.Zt8XjT1gGAL1mKH7yMml [data-intro] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.Zt8XjT1gGAL1mKH7yMml[data-shown='true'] [data-intro] {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0ms);
}

/* Wider screens: 20px taller (user, 2026-10-28), split between top and bottom. */
@media (min-width: 821px) {
  .Zt8XjT1gGAL1mKH7yMml {
    padding-block: calc(max(56px, 4.63vw) + 10px + 0.08 * var(--type-display-l-size));
  }
}

/* The copy runs the full width here, so the art would sit behind it. */
@media (max-width: 820px) {
  .Zt8XjT1gGAL1mKH7yMml {
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Zt8XjT1gGAL1mKH7yMml [data-intro],
  .Zt8XjT1gGAL1mKH7yMml[data-shown='true'] [data-intro] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Forced colors drop box-shadows, which is how the outline button draws its ring; a real border stays. */
@media (forced-colors: active) {
  .h2A4cCN5ctxvK0uA_8_a .EQBElorkywjAVt65_5hY {
    border: 2px solid currentColor;
  }
}