html { scroll-behavior: smooth; }
#overview, .flow-section, #pricing { scroll-margin-top: 100px; outline: none; }
.flow-nav { position: fixed; right: 0; top: 54%; z-index: 100; display: flex; align-items: center; width: 236px; transform: translate(180px, -50%); transition: transform .25s ease; }
.flow-nav.is-open { transform: translate(0, -50%); }
#flow-nav-links { width: 180px; flex: 0 0 180px; padding: 12px; border: 2px solid #d4ad61; border-right: 0; border-radius: 12px 0 0 12px; background: #000; max-height: calc(100dvh - 32px); overflow-y: auto; visibility: hidden; transition: visibility 0s .25s; }
.flow-nav.is-open #flow-nav-links { visibility: visible; transition-delay: 0s; }
.flow-nav a { display: block; color: #fffdf7; text-decoration: none; padding: 10px 8px; border-radius: 7px; font-size: .88rem; font-weight: 600; }
.flow-nav a:hover, .flow-nav a[aria-current] { background: #d4ad61; color: #030e18; }
.flow-nav-toggle { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; padding: 14px; border: 2px solid #d4ad61; border-right: 0; border-radius: 12px 0 0 12px; background: #000; color: #d4ad61; cursor: pointer; }
.flow-nav.is-open .flow-nav-toggle { visibility: hidden; pointer-events: none; }
.flow-nav-toggle svg { width: 25px; height: 25px; }
.flow-nav a:focus-visible, .flow-nav-toggle:focus-visible { outline: 3px solid #d4ad61; outline-offset: 3px; }
.flow-section { padding: 22px 0 48px; border-top: 1px solid #d4ad6155; }
.bookings-section { background: #f8f2e1; }
.cleanings-section { background: #eff8fb; }
.tasks-section { background: #eff7f1; }
.flow-section .focus-copy h2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; color: #0b2235; }
.flow-section .focus-hero { padding-top: 34px; padding-bottom: 28px; }
.flow-section .evidence-section, .flow-section .desktop-evidence { padding-top: 28px; padding-bottom: 24px; }
.flow-section .focus-character img { max-height: 330px; object-fit: contain; }
.flow-section .screen-pair img { border-radius: 8px; }
.flow-trial { text-align: center; padding-block: 54px; }
.flow-trial h2 { color: #0b2235; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.flow-trial p { max-width: 650px; margin-inline: auto; }
.flow-games { padding-block: 36px 64px; text-align: center; }
.flow-games h2 { color: #0b2235; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.flow-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.flow-game-card { overflow: hidden; display: grid; border: 2px solid #d4ad61; border-radius: 16px; background: #fff; color: #0b2235; text-decoration: none; box-shadow: 0 8px 24px #030e1812; }
.flow-game-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.flow-game-card strong { padding: 16px 12px 4px; font-size: 1.2rem; }
.flow-game-card span { padding: 4px 12px 18px; }
.flow-game-card:hover { border-color: #0b2235; }
@media (max-width: 1000px) { .flow-section .focus-hero { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .flow-game-grid { grid-template-columns: 1fr; } .flow-section { padding-bottom: 24px; } .flow-section .focus-character img { max-height: 230px; } .flow-trial { padding-block: 34px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flow-nav, #flow-nav-links { transition: none; } }
.flow-section { color: #173b52; --muted: #385568; }
.flow-section h2, .flow-section h3 { color: #0b2235; }
.flow-section .hero-lede, .flow-section .short-list, .flow-section .evidence-copy p, .flow-section .cleaner-blurb, .flow-section .task-blurb, .flow-section .booking-blurb, .flow-section .cleaner-access-card { color: #29475b; }
.flow-section .eyebrow, .flow-section .short-list li::before, .flow-trial .eyebrow, .flow-games .eyebrow { color: #76551b; }
.flow-section figcaption, .flow-section .booking-calendar-caption { color: #385568; }
.flow-section .screen-pair figure { background: #fff; }
.flow-section .cleaner-access-card { padding: 18px 20px; margin-top: 60px; border-left: 4px solid #d4ad61; border-radius: 8px; background: #fff; }
.flow-nav-toggle { opacity: .25; }
.cleaning-video-slot { min-width: 0; width: 100%; max-height: none; margin-bottom: 0; }
.cleaning-video-launch { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cleaning-video-launch img { width: 100%; }
.cleaning-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 68px; height: 68px; border: 3px solid #d4ad61; border-radius: 50%; color: #d4ad61; background: #000d; box-shadow: 0 4px 20px #0006; }
.cleaning-play-icon svg { width: 32px; height: 32px; }
.cleaning-video-launch:focus-visible { outline: 3px solid #d4ad61; outline-offset: 4px; border-radius: 12px; }
.cleaning-video-slot video { display: block; width: 100%; max-height: 420px; border-radius: 12px; background: #000; }
.cleaning-video-slot [hidden] { display: none; }
@media (max-width: 680px) { .flow-section .cleaning-video-slot { max-height: none; margin-bottom: 0; } .flow-section .cleaning-video-slot video { max-height: none; height: auto; } }
html, body, .quick-hero, .flow-section, .bookings-section, .cleanings-section, .tasks-section, .flow-trial, .flow-games, .homepage-testimonial-section, .customer-testimonial, .home-developer-service, .roku-help-banner, .site-footer { background: #fff; }
.flow-section { border-top: 0; }
/* Header is intentionally dark regardless of earlier homepage theme rules. */
body .site-header { background: #030e18 !important; background-color: #030e18 !important; border-color: rgba(212,173,97,.28) !important; }
body .site-header .primary-nav a, body .site-header .nav-toggle { color: #e4e9ed !important; }
body .site-header .primary-nav .button { color: #030e18 !important; }
body .site-header .primary-nav a:hover, body .site-header .primary-nav a:focus-visible { color: #f1d18a !important; }
body .site-header .nav-toggle { background: rgba(255,255,255,.05) !important; border-color: rgba(212,173,97,.45) !important; }
.site-footer, .site-footer a, .site-footer p { color: #385568; }
.site-footer a:hover, .site-footer a:focus-visible { color: #76551b; }
.site-footer .screenshot-disclaimer { color: #526b7b; }
.quick-hero .hero-visual-banner { background: #fff; border: 1px solid #d4ad61; }
.trial-divider { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; margin-block: 16px; text-align: center; border-top: 1px solid #e2e6e9; border-bottom: 1px solid #e2e6e9; background: #fff; }
.trial-divider-helper, .flow-trial .trial-divider-helper { margin: 0; color: #526b7b; font-size: .75rem; line-height: 1.4; }
.flow-trial .trial-button { margin-top: 12px; }
.flow-trial .trial-divider-helper { margin-top: 8px; }
@media (max-width: 980px) { body .site-header .primary-nav { background: #030e18 !important; border-color: rgba(212,173,97,.28) !important; } }
.trial-divider-helper, .flow-trial .trial-divider-helper { white-space: nowrap; font-size: clamp(.625rem, 2.8vw, .75rem); }
.flow-section .booking-blurb, .flow-section .cleaner-blurb, .flow-section .task-blurb { width: min(100%, 380px); margin: 0 auto 24px; padding: 16px 20px; border: 1px solid #d4ad61; border-left: 4px solid #d4ad61; border-radius: 12px; background: #fff; color: #173b52; font-size: clamp(1rem, 1.6vw, 1.18rem); font-style: italic; font-weight: 600; line-height: 1.45; text-align: center; }
.flow-section .booking-blurb::before, .flow-section .booking-blurb::after, .flow-section .cleaner-blurb::before, .flow-section .cleaner-blurb::after, .flow-section .task-blurb::before, .flow-section .task-blurb::after { content: none; }