:root { --sm-ease: cubic-bezier(.2, .7, .2, 1); --sm-seen: "main.home > section:not(:first-child, #feel, #ladder) :is(.home-head, .home-cards3 > *, .home-items-list > li, .home-steps-list, .home-steps-list > li, .home-feat-list > li, .home-faq-list > details, .home-cta-pictures > img, .home-cta-copy, .wrap > .home-media, .wrap > .home-actions), .home-price-list > *, main.search > section:not(:first-child, .stopwrap) > .wrap > :is(h2, .table-box, .plan-call, figure), main.site:not(.home, .search) > :is(h2, .company), .articles > li"; --sm-count: "#guidelines .home-items-list h3"; --sm-words: ".home-head > h2"; --sm-cta: "main > section:first-child :is(.home-goals, .home-actions)"; --sm-lean: "main.home > section:first-child, .home-feat-list > li"; } .sm-js .nav::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); opacity: 0; pointer-events: none; } .sm-scrolled .nav::after { opacity: 1; } .look-men .nav::after { content: none; } @media (max-width: 599.98px) { .sm-js .nav-cta { opacity: 0; visibility: hidden; } .sm-js.sm-cta .nav-cta { opacity: 1; visibility: visible; } } @media (max-width: 374.98px) { .nav-right { column-gap: .5rem; } } @media (max-width: 459.98px) { body:is(.look-women, .look-men) .nav-cta { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 15px; } body:is(.look-women, .look-men) .menu-btn { width: 44px; padding: 0; font-size: 0; } body:is(.look-women, .look-men) .menu-btn::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; } body:is(.look-women, .look-men) :is(.menu-btn, .lang-btn) { border-radius: var(--flat-r); } html:not(.sm-cta) body:is(.look-women, .look-men) .nav-cta { visibility: hidden; } } @media (prefers-reduced-motion: no-preference) { .sm-js .nav::after { transition: opacity .3s ease; } @media (max-width: 599.98px) { .sm-js .nav-cta { transition: opacity .18s ease, visibility 0s .18s, var(--cta-move, color 0s); } .sm-js.sm-cta .nav-cta { transition: opacity .32s var(--sm-ease), visibility 0s, var(--cta-move, color 0s); } } } @media print { .sm-wait, .sm-wait *, .sm-load { opacity: 1 !important; } .sm-fig .sm-v { display: none; } .sm-fig .sm-o { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .sm-wait { opacity: 0; } .sm-in { --sm-d: calc(var(--sm-i, 0) * 80ms); animation: sm-fade .6s ease-out var(--sm-d) backwards, sm-rise .9s var(--sm-ease) var(--sm-d) backwards; } @keyframes sm-fade { from { opacity: 0; } } @keyframes sm-rise { from { translate: 0 26px; } } @keyframes sm-settle { from { scale: .94; } } @keyframes sm-ease-in { from { scale: 1.07; } } @keyframes sm-slide { from { opacity: 0; translate: -12px 0; } } @keyframes sm-place { from { opacity: 0; translate: 14px 18px; } } @keyframes sm-strike { from { color: var(--ink); text-decoration-color: transparent; } } @keyframes sm-mask { from { clip-path: inset(0 -.2em 100% -.2em); translate: 0 100%; } to { clip-path: inset(-.3em -.2em -.3em -.2em); translate: 0 0; } } .home-head.sm-wait { opacity: 1; } .home-head.sm-wait > * { opacity: 0; } .home-head.sm-in { animation: none; } .sm-w { display: inline-block; animation: sm-mask .8s var(--sm-ease) calc(var(--sm-d, 0ms) + var(--sm-w, 0) * 55ms) backwards; } .home-head em .sm-w { animation-delay: calc(var(--sm-d, 0ms) + var(--sm-w, 0) * 55ms + 140ms); } .home-head.sm-in > :not(h2) { --sm-d: calc(var(--sm-i, 0) * 80ms + 260ms); animation: sm-fade .6s ease-out var(--sm-d) backwards, sm-rise .9s var(--sm-ease) var(--sm-d) backwards; } .home-cards3 > .sm-in .home-card-media img { animation: sm-ease-in 1.4s var(--sm-ease) var(--sm-d) backwards; } .home-pair.sm-wait { opacity: 1; } .home-pair.sm-wait > * { opacity: 0; } .home-pair.sm-in { --sm-d: calc(var(--sm-i, 0) * 140ms); animation: none; } .home-pair.sm-in > .home-was { animation: sm-fade .5s ease-out var(--sm-d) backwards, sm-rise .7s var(--sm-ease) var(--sm-d) backwards; } .home-pair.sm-in > .home-was h3 { animation: sm-strike .45s ease-out calc(var(--sm-d) + 480ms) backwards; } .home-pair.sm-in > .home-pair-arrow { animation: sm-slide .5s var(--sm-ease) calc(var(--sm-d) + 680ms) backwards; } .home-pair.sm-in > .home-now { animation: sm-fade .5s ease-out calc(var(--sm-d) + 780ms) backwards, sm-rise .8s var(--sm-ease) calc(var(--sm-d) + 780ms) backwards; } .home-steps-list:is(.sm-wait, .sm-in) { opacity: 1; animation: none; } .home-steps-list > .sm-in { --sm-d: calc(var(--sm-i, 0) * 110ms); } .home-steps-list > .sm-in .home-phone { transform-origin: 50% 100%; animation: sm-settle 1s var(--sm-ease) var(--sm-d) backwards; } .home-steps-list > .sm-in :is(h3, p) { animation: sm-fade .6s ease-out calc(var(--sm-d) + 220ms) backwards; } @media (max-width: 1039.98px) { .look-home main.home-tight .home-steps-list.sm-wait { opacity: 0; } .look-home main.home-tight .home-steps-list.sm-in { animation: sm-fade .6s ease-out backwards, sm-rise .9s var(--sm-ease) backwards; } .look-home main.home-tight .home-steps-list > li:is(.sm-wait, .sm-in), .look-home main.home-tight .home-steps-list > li :is(.home-phone, h3, p) { opacity: 1; animation: none; } } .home-feat-list > .sm-in .home-item-media .home-phone { animation: sm-place .8s var(--sm-ease) calc(var(--sm-d) + 240ms) backwards; } .home-items-list > .sm-in > img { animation: sm-settle 1.1s var(--sm-ease) var(--sm-d) backwards; } .home-items-list > .sm-in > .home-link { animation: sm-fade .6s ease-out calc(var(--sm-d) + 700ms) backwards; } .sm-fig { position: relative; } .sm-o { opacity: 0; } .sm-v { position: absolute; white-space: nowrap; } .home-faq-list > .sm-in { --sm-d: calc(var(--sm-i, 0) * 45ms); animation-duration: .5s, .7s; } .home-cta-pictures > .sm-in:last-child { animation-duration: .6s, 1.2s; } .home-cta-copy.sm-in { --sm-d: 160ms; } @media (max-width: 759.98px) and (orientation: portrait) { @supports (animation-timeline: view()) and (timeline-scope: --a) { .look-home .home #body .home-items-list > li.sm-wait { opacity: 1; } .look-home .home #body .home-items-list > li.sm-in:nth-child(3), .look-home .home #body .home-items-list > li.sm-in > img { animation: none; } } } .nav .wordmark { view-transition-name: brand-mark; } .sm-js main img[loading="lazy"] { transition: opacity .5s ease; } .sm-load { opacity: 0; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .home-filmhero .home-chip { translate: calc(var(--sm-x, 0) * -14px) calc(var(--sm-y, 0) * -10px); } .home-filmhero .home-hero-phone { translate: calc(var(--sm-x, 0) * 12px) calc(var(--sm-y, 0) * 8px); } .home-feat-list .home-item-media .home-phone { translate: calc(var(--sm-x, 0) * 10px) calc(var(--sm-y, 0) * 8px); } .sm-js main .home-plain .home-card-media img { transition: scale .9s var(--sm-ease), opacity .5s ease; } .home-plain:hover .home-card-media img { scale: 1.035; } .home-steps-list .home-phone { transition: scale .6s var(--sm-ease); } .home-steps-list li:hover .home-phone { scale: 1.02; } .home-price { outline: 2px solid transparent; outline-offset: -2px; } .home-price:hover { outline-color: color-mix(in srgb, currentColor 24%, transparent); } } @media (prefers-reduced-motion: no-preference) { .btn-secondary, .menu-btn, .lang-btn, .home-choice, .home-textlink { transition: background-color .2s ease, color .2s ease, scale .16s var(--sm-ease); } .home-goal { transform-origin: 0 50%; transition: scale .16s var(--sm-ease); } .btn-secondary:active, .menu-btn:active, .lang-btn:active, .home-choice:active, .home-textlink:active { scale: .96; } .home-goal:active { scale: .975; } .home-price { transition: outline-color .25s ease; } } @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { .home-faq-list { interpolate-size: allow-keywords; } .home-faq-list details::details-content { block-size: 0; overflow-y: clip; transition: block-size .38s cubic-bezier(.3, 0, .2, 1), content-visibility .38s allow-discrete; } .home-faq-list details[open]::details-content { block-size: auto; } } .home .home-faq-list summary::after { transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1), scale .16s var(--sm-ease), background-color .2s ease; } .home .home-faq-list summary:active::after { scale: .82; } } @media (hover: hover) and (forced-colors: none) { .home .home-faq-list summary:hover::after { background-color: var(--ink); } }