/* Figma CTA-primary (2830:7093 large, 2830:7098 small). */
.NyTe9SbHLsljNPzJvf_g {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border-radius: 41px;
  background: var(--action-primary-default, #0073e6);
  color: var(--text-inverse, #ffffff);
  /* After Figma's CTA type (ExtraBold), one weight lighter: Raleway Bold, all caps, tracked out. */
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  font-size: var(--type-size-cta, 16px);
  font-weight: 700;
  line-height: var(--type-line-height-cta, 20px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    box-shadow 250ms ease,
    scale 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.FGPAiDCfz1K53vOnyfxn {
  padding: 20px 32px;
}

/* A section's one call to action (e.g. How We Work's "Explore the platform"): wider, taller, its type larger and more tracked, its arrow larger. */
.olee_F7jYo2h4iA02BTJ {
  gap: 20px;
  padding: max(22px, 1.74vw) max(64px, 4.63vw);
  border-radius: 999px;
  font-size: clamp(18px, 1.27vw, 22px);
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.olee_F7jYo2h4iA02BTJ .WuD9CTOLkZc73yvrv5gE {
  width: 1.1em;
  height: auto;
}

/* Phones: within their container (a narrow box's padding, not only the screen), the label wrapping if it must; the large size also narrower and less tracked. */
@media (max-width: 767px) {
  .NyTe9SbHLsljNPzJvf_g {
    max-width: 100%;
    white-space: normal;
  }

  .olee_F7jYo2h4iA02BTJ {
    max-width: 100%;
    padding-inline: 28px;
    letter-spacing: 0.1em;
    white-space: normal;
  }
}

.WuD9CTOLkZc73yvrv5gE {
  flex: none;
  transition: translate 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Grows slightly and lifts with the menu's soft shadow, on every theme/variant. */
.NyTe9SbHLsljNPzJvf_g:hover,
.NyTe9SbHLsljNPzJvf_g:focus-visible {
  scale: 1.04;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.04),
    0 8px 28px rgb(0 0 0 / 0.08);
}

/* Primary — default state: light and dark themes share the same blue-pill look (hover is what tells them apart).
   Light turns pure black (not the soft black, #353535 before 2026-10-28: black holds its contrast over any
   background, user ruling). */
.NyTe9SbHLsljNPzJvf_g[data-theme='light']:hover,
.NyTe9SbHLsljNPzJvf_g[data-theme='light']:focus-visible {
  background: #000000;
}

.NyTe9SbHLsljNPzJvf_g[data-theme='dark']:hover,
.NyTe9SbHLsljNPzJvf_g[data-theme='dark']:focus-visible {
  background: var(--background-default, #ffffff);
  color: var(--action-primary-default, #0073e6);
}

/* Primary — blue theme: the page is already blue, so the pill reverses (white/blue) and darkens on hover instead. */
.NyTe9SbHLsljNPzJvf_g[data-theme='blue'] {
  background: var(--background-default, #ffffff);
  color: var(--action-primary-default, #0073e6);
}

.NyTe9SbHLsljNPzJvf_g[data-theme='blue']:hover,
.NyTe9SbHLsljNPzJvf_g[data-theme='blue']:focus-visible {
  background: #000000; /* pure black, as the light theme's hover */
  color: var(--text-inverse, #ffffff);
}

/*
 * Outline — a ring instead of a fill. Blue/dark pages are already saturated, so the ring/text
 * reads as white; light needs the brand blue instead (white-on-white would vanish). Hover fills
 * solid with that same ring color and flips the text.
 * Dark+outline and light+outline have no Figma reference yet — this mirrors the one designed
 * combo (outline on blue) by reusing whichever of blue/dark's or light's own colors are legible
 * against that theme; revisit once a real spec exists.
 */
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'] {
  background: transparent;
}

.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='blue'],
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='dark'] {
  color: var(--text-inverse, #ffffff);
  box-shadow: inset 0 0 0 2px var(--text-inverse, #ffffff);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='light'] {
  color: var(--action-primary-default, #0073e6);
  box-shadow: inset 0 0 0 2px var(--action-primary-default, #0073e6);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='blue']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='blue']:focus-visible,
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='dark']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='dark']:focus-visible {
  background: var(--background-default, #ffffff);
  color: var(--action-primary-default, #0073e6);
  box-shadow:
    inset 0 0 0 2px var(--background-default, #ffffff),
    0 1px 3px rgb(0 0 0 / 0.04),
    0 8px 28px rgb(0 0 0 / 0.08);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='light']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='outline'][data-theme='light']:focus-visible {
  background: var(--action-primary-default, #0073e6);
  color: var(--text-inverse, #ffffff);
  box-shadow:
    inset 0 0 0 2px var(--action-primary-default, #0073e6),
    0 1px 3px rgb(0 0 0 / 0.04),
    0 8px 28px rgb(0 0 0 / 0.08);
}

.NyTe9SbHLsljNPzJvf_g:hover .WuD9CTOLkZc73yvrv5gE,
.NyTe9SbHLsljNPzJvf_g:focus-visible .WuD9CTOLkZc73yvrv5gE {
  translate: 4px 0;
}

.NyTe9SbHLsljNPzJvf_g:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Where focus turns it black (light theme, primary): a brand-blue ring, 2px out, as on the menu. */
.NyTe9SbHLsljNPzJvf_g[data-theme='light'][data-variant='primary']:focus-visible {
  outline-color: var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

/*
 * Light theme, outline: focus fills the ring solid blue with white text (the hover/focus rule
 * above), so a currentColor ring would turn white here too — invisible against this theme's own
 * white page background. Keep it the brand blue instead, same as the ring's own resting color.
 */
.NyTe9SbHLsljNPzJvf_g[data-theme='light'][data-variant='outline']:focus-visible {
  outline-color: var(--action-primary-default, #0073e6);
}

/*
 * Text — no pill (ported from HomeTransitions/TextLink.tsx): bare text with an underline that
 * draws in on hover and the same arrow-slide the filled variants use, but no fill/scale/lift on
 * any theme. padding-right reserves room for the arrow's hover-slide so the link's own box never
 * changes width on hover (it would otherwise visibly shift everything after it to the left).
 * Default color follows how dark the page already is (near-black on light, white on dark/blue);
 * only light recolors on hover (to the brand blue) — dark/blue already read white, so their own
 * hover is underline + arrow only, per design.
 */
.NyTe9SbHLsljNPzJvf_g[data-variant='text'] {
  position: relative;
  align-self: center; /* no pill to give it height, so never stretch to a taller flex sibling's. */
  gap: 12px;
  padding: 0 8px 0 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='light'] {
  color: var(--text-primary, #171717);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='dark'],
.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='blue'] {
  color: var(--text-inverse, #ffffff);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='text']:focus-visible {
  scale: none;
  background: none;
  box-shadow: none;
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='light']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='light']:focus-visible {
  color: var(--action-primary-default, #0073e6);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='dark']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='dark']:focus-visible,
.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='blue']:hover,
.NyTe9SbHLsljNPzJvf_g[data-variant='text'][data-theme='blue']:focus-visible {
  color: var(--text-inverse, #ffffff);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text']::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(0.45, 0, 0.55, 1);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text']:is(:hover, :focus-visible)::after {
  transform: none;
  transform-origin: left;
  transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
}

.NyTe9SbHLsljNPzJvf_g[data-variant='text']:focus-visible {
  border-radius: 4px;
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .NyTe9SbHLsljNPzJvf_g,
  .WuD9CTOLkZc73yvrv5gE,
  .NyTe9SbHLsljNPzJvf_g[data-variant='text']::after {
    transition: none;
  }

  .NyTe9SbHLsljNPzJvf_g:hover,
  .NyTe9SbHLsljNPzJvf_g:focus-visible {
    scale: none;
  }
}

/* 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;
  }
}

/* Phones: the section spacing scale in place of the 56px floor, still with the heading's share added (see .band). */
@media (max-width: 767px) {
  .Zt8XjT1gGAL1mKH7yMml {
    padding-block: calc(var(--section-space-md, 48px) + 0.08 * var(--type-display-l-size));
  }
}

@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;
  }
}