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