/* Home page "/" — rules that aren't in the ported live CSS bundle. */

/* --- react-fast-marquee (the library injected these at runtime; testimonial marquee) --- */
.rfm-marquee-container { overflow-x: hidden; display: flex; flex-direction: row; position: relative; width: var(--width); transform: var(--transform); }
.rfm-marquee-container:hover div { animation-play-state: var(--pause-on-hover); }
.rfm-marquee-container:active div { animation-play-state: var(--pause-on-click); }
.rfm-marquee { flex: 0 0 auto; min-width: var(--min-width); z-index: 1; display: flex; flex-direction: row; align-items: center;
               animation: rfm-scroll var(--duration) linear var(--delay) var(--iteration-count); animation-play-state: var(--play);
               animation-delay: var(--delay); animation-direction: var(--direction); }
@keyframes rfm-scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.rfm-initial-child-container { flex: 0 0 auto; display: flex; min-width: auto; flex-direction: row; align-items: center; }
.rfm-child { transform: var(--transform); }

/* --- module tabs: the active tab (live had hover only; keyboard focus gets the same look) --- */
.Home__modulesInteraction:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Watch Video modal --- */
#homeVideoModal .modal-body iframe { display: block; }

/* --- client logo marquee (ADR-0010): logos from static/logos, any size — normalise the height --- */
/* Spacing is a margin on every logo, not the track's gap: the track scrolls -50% over two copies,
   so each copy must end with its own space or the loop jumps at the seam. */
.Home__marqueeTrack { gap: 0; }
.Home__marqueeTrack .Home__clientLogo { height: 2.75rem; width: auto; max-width: 150px; margin-right: 4rem; }
@media (max-width: 767.98px) { .Home__marqueeTrack .Home__clientLogo { height: 2.25rem; max-width: 120px; margin-right: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .Home__marqueeTrack { animation-play-state: paused; } }

/* --- module tabs: image-left panels (Payroll, Performance) ---
   Live nudged the image 50px left with an inline margin. That only fits when the viewport's side
   margin outside the container is wider than 50px (≥1500px); below that it pushed the image off
   the left edge of the screen, so the nudge is limited to wide screens. The text column's matching
   +50px margin (site.css) cancels it out, so it moves with it; below 1500px the gap between image and
   text is padding instead, which can't push the row wider than the screen. */
@media (min-width: 1500px) { .Home__quickModuleImgLeft { margin-left: -50px; } }
@media (max-width: 1499.98px) { .Home__leftQucikModule { margin-left: 0; } }
@media (min-width: 992px) and (max-width: 1499.98px) { .Home__leftQucikModule { padding-left: 2.5rem; } }