/* Minimal static replacements for Webflow interactions; original design CSS stays intact. */
[hidden]{display:none!important}
.menu.is-open{display:flex;opacity:1;transform:none}
.menu-icon{color:inherit}
.nav-bg{pointer-events:none}

.menu-icon{transition:transform .2s}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.swiper{overflow:hidden}
.swiper-button-next,.swiper-button-prev{cursor:pointer}
.swiper-button-next:after,.swiper-button-prev:after{display:none}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:8;touch-action:pan-y}
.smile-box:focus-within{outline:2px solid #4c644d;outline-offset:3px}
.smile-box .before-controller{width:var(--comparison,50%)}
.smile-box .after-controller{width:calc(100% - var(--comparison,50%))}
.smile-box .mid-circle-controller{left:0}.smile-box .ani-controller-for-mid-circler{width:var(--comparison,50%)}
.hero-px-holder{position:relative}
.video-toggle{position:absolute;right:16px;bottom:16px;background:#4c644deb;color:#f8f6ed;border:1px solid #f8f6ed88;padding:8px 12px;font:14px 'tt-commons-pro',sans-serif;cursor:pointer;z-index:2}
@keyframes logo-marquee{to{transform:translateX(-50%)}}
.marquee-logos{animation:logo-marquee 35s linear infinite}
.marquee-logos-wrapper:hover .marquee-logos{animation-play-state:paused}
/* Under 768px Webflow shows the logos as a still 2-column grid (no loop copy), so the slide above
   pushed them off the left edge; Webflow's own grid also hugged the left half. Still, full width,
   even columns (Noah, Duo inner screen, 2026-10-28). */
@media screen and (max-width:767px){.marquee-logos{animation:none;justify-content:center}.marquee-logos-list{width:100%;justify-items:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.menu-icon svg{display:block;width:100%;height:100%;overflow:visible}

.menu-icon{width:24px;height:24px;flex:none}

@media(max-width:479px){.smile-box .before-controller,.smile-box .after-controller{width:100%}.comparison-range{display:none}}

.static-review-badge{width:198px;min-height:114px;padding:14px 16px;border:1px solid #dedede;border-radius:8px;background:#fff;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:#111;font-family:andale-mono-mt-pro,monospace;font-size:14px;line-height:1.2}
.static-review-badge>svg{width:24px;height:24px;fill:none}
.badge-rating{font-size:20px;white-space:nowrap}.badge-stars{color:#ffb400;letter-spacing:-2px}.badge-count{color:#006be6;font-size:14px}

@media(max-height:740px){.menu.is-open{justify-content:flex-start;overflow-y:auto;padding-top:calc(var(--_nav-bar---nav-bar-size) + 20px)}}

/* Animate dividers from the same edge as the source, preserving their layout footprint. */
[data-line-horizontal]{transform-origin:left center}
[data-line-horizontal].reverse{transform-origin:right center}
[data-line-vertical]{transform-origin:center top}

/* Preserve the footer palette with readable label contrast. */
.footer-header{opacity:1}

/* Intrinsic HTML dimensions reserve space; fluid editorial images retain their aspect ratio. */
img{height:auto}

/* Menu open/close motion (Webflow original: ~350ms, ease-in). home.js toggles the classes. */
.menu.is-open{transition:opacity .35s cubic-bezier(.55,.085,.68,.53),transform .35s cubic-bezier(.55,.085,.68,.53)}
.menu.is-open.is-opening{opacity:0;transform:scale(1.3);transition:none}
.menu.is-open.is-closing{opacity:0;transform:scale(1.1);transition-timing-function:cubic-bezier(.55,.055,.675,.19)}

/* Menu icon: the two lines slide together, then turn into an X; closing plays it backwards. */
.menu-icon .menu-line{transform-box:fill-box;transform-origin:center;transition:transform .2s ease}
.menu-icon .menu-line-slide{transition:transform .15s ease .2s}
#menu-toggle[aria-expanded="true"] .menu-line-slide{transition-delay:0s}
#menu-toggle[aria-expanded="true"] .menu-line{transition-delay:.15s}
#menu-toggle[aria-expanded="true"] .menu-line-top{transform:translateY(5px)}
#menu-toggle[aria-expanded="true"] .menu-line-bottom{transform:translateY(-5px)}
#menu-toggle[aria-expanded="true"] .menu-line-top .menu-line{transform:rotate(45deg)}
#menu-toggle[aria-expanded="true"] .menu-line-bottom .menu-line{transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu.is-open,.menu-icon .menu-line,.menu-icon .menu-line-slide{transition:none}}