/* Tunable palette, geometry and timing. Yellow keeps trial CTAs easy to find. */
.welcome-lp {
  --df-duration: 420ms;
  --df-easing: cubic-bezier(.16,1,.3,1);
  --df-distance: 101%;
  --df-outline: 1px;
  --df-radius: 0px;
  --df-fill: #000;
  --df-focus: #247353;
  --df-icon-size: 22px;
  --df-icon-stroke: 2px;
}
.welcome-lp .direction-button {
  --df-base: var(--yellow);
  --df-label: var(--yellow);
  --df-border: var(--yellow);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--df-outline) solid var(--df-border);
  border-radius: var(--df-radius);
  background: var(--df-base);
  color: #000;
  text-decoration: none;
  transition: transform 160ms var(--df-easing);
  -webkit-tap-highlight-color: transparent;
}
.welcome-lp .direction-button.direction-outline {
  --df-base: #fff;
  --df-label: #fff;
  --df-border: #132b22;
}
.welcome-lp .closing .direction-button { background: var(--df-base); color: #000; }
.welcome-lp .direction-button .direction-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--df-fill);
  transform: translateX(calc(-1 * var(--df-distance)));
}
.welcome-lp .direction-button .direction-label {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: inherit;
  color: var(--df-label);
  mix-blend-mode: difference;
  pointer-events: none;
}
.welcome-lp .direction-button .direction-label>span:first-child { min-width: 0; }
.welcome-lp .direction-button .direction-label svg {
  display: block;
  width: var(--df-icon-size);
  height: var(--df-icon-size);
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: var(--df-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.welcome-lp .direction-button.is-filling .direction-fill { will-change: transform; }
.welcome-lp .direction-button:focus-visible {
  outline: 3px solid var(--df-focus);
  outline-offset: 4px;
}
.welcome-lp .site-header .direction-button:focus-visible,
.welcome-lp .mobile-cta .direction-button:focus-visible { --df-focus: #fff; }
.welcome-lp .direction-button:active { transform: scale(.985) !important; }
/* Secondary actions use the same geometry and clear outline, without competing with yellow. */
.welcome-lp .hero-guide.direction-button { padding: 16px 22px; min-height: 60px; font-size: 14px; font-weight: 700; gap: 22px; margin-top: 0; }
.welcome-lp .ai-coach-button.direction-button { gap: 24px; }
.welcome-lp .recruit-trial.direction-button { --df-icon-size: clamp(22px,3.4cqw,34px); padding: 18px 24px; gap: 28px; font-size: clamp(22px,4.8cqw,50px); }
.welcome-lp .recruit-trial.direction-button>span { border: 0; }
.welcome-lp .direction-button:hover { background: var(--df-base); color: #000; transform: none; }
.welcome-lp .direction-button:focus-visible .direction-fill,
.welcome-lp .direction-button:active .direction-fill { transform: translate(0,0); }
/* Usable even when JS is unavailable; no label or information depends on hover. */
@media (hover:hover) and (pointer:fine) {
  .welcome-lp .direction-button:not(.direction-ready) .direction-fill { transition: transform var(--df-duration) var(--df-easing); }
  .welcome-lp .direction-button:not(.direction-ready):hover .direction-fill { transform: translate(0,0); }
}
@media (max-width:600px) {
  .welcome-lp .hero-guide.direction-button { width: 100%; min-height: 52px; padding: 14px 20px; }
  .welcome-lp .recruit-trial.direction-button { padding: 16px 14px; gap: 14px; font-size: clamp(17px,5.5cqw,24px); }
  .welcome-lp .mobile-cta .direction-label { gap: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .welcome-lp .direction-button, .welcome-lp .direction-fill { transition: none !important; }
  .welcome-lp .direction-button:active { transform: none !important; }
}
.welcome-lp.reduce-motion .direction-button,
.welcome-lp.reduce-motion .direction-fill { transition: none !important; }
.welcome-lp.reduce-motion .direction-button:active { transform: none !important; }