/* Creatix x Modulus placements: Figma uwUar6r5NFjOlQKGg0G7E6. */
.modulus-logo { display: block; position: relative; overflow: hidden; }
.modulus-logo img { display: block; max-width: none; }
.modulus-logo-hero { width: 229px; height: 40px; margin-top: 22px; padding: 2px 3px 0 0; }
.modulus-logo-banner { width: 103px; height: 18px; padding-top: 1px; }
.modulus-logo-about { width: 194px; height: 34px; padding-top: 2px; margin: 0 auto; }
.modulus-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.modulus-mark img { display: block; max-width: none; }
.modulus-mark-purple { width: 12px; height: 10px; }
.modulus-mark-white { width: 17px; height: 14px; }
.modulus-new { display: inline-block; padding: 5px 14px; border-radius: 20px; background: #8f81bb; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; }
.header .mainnav ul li a.modulus-nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px solid transparent; padding: 3px 10px; }
.modulus-nav-badge { padding: 1px 8px; border-radius: 10px; background: #8f81bb; color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; }
.header .mainnav ul li a.modulus-nav-link:hover { background: transparent; border-color: transparent; color: #c5bedc; }
.modulus-nav-link:focus-visible, .modulus-start:focus-visible, .modulus-about-start:focus-visible,
.modulus-footer-option a:focus-visible, .modulus-agency-link:focus-visible { outline: 3px solid #b9a9ed; outline-offset: 5px; }

.mainbanner.has-modulus { min-height: 780px; height: 100vh; height: 100svh; background-color: #111114; }
.mainbanner .slide.modulus-hero { width: calc(100% + 200px); left: -100px; background: #111114 url('../img/modulus/hero-background.png') center / cover no-repeat; }
.modulus-hero::before { content: ''; position: absolute; width: 1200px; height: 800px; left: calc(50% - 920px); top: 120px; background: radial-gradient(ellipse, rgba(143,129,187,.3), rgba(143,129,187,0) 70%); pointer-events: none; }
.modulus-hero-inner { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; }
.modulus-hero-art { position: absolute; width: 76.389%; height: auto; aspect-ratio: 1100 / 640; object-fit: cover; left: -8.333%; top: 26.222%; }
.modulus-hero-copy { position: absolute; top: 21.111%; right: 6.944%; width: 700px; max-width: 50%; display: flex; flex-direction: column; align-items: flex-start; text-align: right; }
.modulus-hero-copy h2 { margin: 18px 0 0; padding: 0; color: #fff; font-size: 72px; font-weight: 700; line-height: 79px; }
.modulus-hero-copy p { width: 520px; max-width: 100%; margin: 14px 0 0; color: #d4d4da; font-size: 22px; line-height: 32px; }
.modulus-hero-copy .modulus-start { margin-top: 30px; background: #fff; color: #111114; line-height: 34px; }
.modulus-hero-copy .modulus-start:hover { background: #e6e0f5; border-color: #e6e0f5; }
.modulus-hero-copy small { margin-top: 14px; color: #a9a9b2; font-size: 16px; line-height: 24px; }
.mainbanner.has-modulus .arrowleft, .mainbanner.has-modulus .arrowright { width: 25px; height: 44px; top: calc(50% - 30px); opacity: 1; background-size: 22px 42px; }
.mainbanner.has-modulus .arrowleft { left: 47px; background-image: url('../img/modulus/arrow-left.svg'); }
.mainbanner.has-modulus .arrowright { right: 47px; background-image: url('../img/modulus/arrow-right.svg'); }
.mainbanner.has-modulus .slide-down { bottom: 29px; left: calc(50% - 22px); width: 44px; height: 25px; background: url('../img/modulus/arrow-down.svg') center no-repeat; z-index: 601; }

.modulus-banner { overflow: hidden; position: relative; background: #0a0a0b; color: #fff; }
.modulus-banner-inner { position: relative; max-width: 1440px; min-height: 600px; margin: 0 auto; padding: 76px 6.944% 76px 51.389%; }
.modulus-banner-inner::before { content: ''; position: absolute; width: 900px; height: 760px; top: -80px; left: -80px; background: radial-gradient(ellipse, rgba(143,129,187,.34), rgba(143,129,187,0) 70%); pointer-events: none; }
.modulus-banner-copy { position: relative; z-index: 1; }
.modulus-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; color: #c5bedc; font-weight: 700; }
.modulus-banner h2 { margin: 18px 0 0; color: #fff; font-size: 60px; line-height: 66px; font-weight: 700; }
.modulus-banner h3 { margin: 10px 0 0; font-size: 26px; line-height: 36px; color: #e4e4e7; font-weight: 400; }
.modulus-banner-copy > p { margin: 14px 0 0; color: #a1a1aa; font-size: 18px; line-height: 28px; max-width: 560px; }
.modulus-prompt { display: flex; align-items: center; padding: 8px 22px 8px 8px; gap: 12px; min-height: 64px; margin: 28px 0 0; background: #fff; border-radius: 12px; }
.modulus-prompt input[type=text] { width: 0; flex: 1; min-width: 0; padding: 0; border: 0; box-shadow: none; background: #fff; color: #111114; font: inherit; font-size: 18px; line-height: 26px; outline: none; }
.modulus-prompt input::placeholder { color: #71717a; opacity: 1; }
.modulus-prompt:focus-within { outline: 3px solid #8f81bb; outline-offset: 3px; }
.modulus-prompt button { flex: none; border: 0; border-radius: 9px; padding: 11px 22px; background: #111114; color: #fff; font: inherit; font-size: 18px; line-height: 26px; font-weight: 700; cursor: pointer; }
.modulus-prompt button:hover { background: #67568f; }
.modulus-prompt button:focus-visible { outline: 3px solid #8f81bb; outline-offset: 2px; }
.modulus-benefits { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: #a1a1aa; font-size: 15px; line-height: 22px; }
.modulus-benefits li::before { content: '✓'; color: #8f81bb; font-weight: 700; margin-left: 6px; }
.modulus-agency-link { display: inline-block; margin-top: 26px; border-bottom: 2px solid #8f81bb; padding-bottom: 2px; color: #a1a1aa; font-size: 17px; line-height: 26px; }
.modulus-agency-link strong { color: #fff; margin-right: 6px; }
.modulus-agency-link:hover { color: #fff; text-decoration: none; border-color: #fff; }
.modulus-banner-visual { position: absolute; width: 44.444%; left: 4.861%; top: 62px; }
.modulus-banner-art { display: block; width: 100%; height: auto; aspect-ratio: 640 / 448; object-fit: cover; }
.modulus-prompt-example { position: absolute; top: 106px; right: 40px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 20px rgba(0,0,0,.6); color: #111114; text-align: right; }
.modulus-prompt-example > span { display: flex; align-items: center; gap: 6px; color: #71717a; font-size: 13px; line-height: 18px; }
.modulus-prompt-example strong { display: block; margin-top: 2px; font-size: 17px; line-height: 24px; white-space: nowrap; }

.modulus-footer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; }
.modulus-footer-option { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #bdbdbd; font-size: 20px; line-height: 28px; }
.modulus-footer-option > a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid #8f81bb; padding-bottom: 1px; color: #fff; font-weight: 700; }
.modulus-footer-option > a:hover { text-decoration: none; border-color: #fff; }

.modulus-about { position: relative; background: #ddd; overflow: hidden; }
.modulus-about-copy { max-width: 940px; margin: 0 auto; padding: 64px 20px 0; text-align: center; }
.modulus-about h2 { margin: 16px 0 0; font-size: 72px; line-height: 79px; color: #333; }
.modulus-about p { margin: 10px 0 0; color: #7a7a7a; font-size: 22px; line-height: 31px; }
.modulus-about .modulus-about-start { margin-top: 26px; background: #333; border-color: #333; color: #fff; font-size: 22px; line-height: 32px; }
.modulus-about .modulus-about-start:hover { background: #67568f; border-color: #67568f; }
.modulus-about-stores { position: relative; height: 280px; margin: 82px auto 0; max-width: 1440px; direction: ltr; }
.modulus-store { position: absolute; bottom: 0; width: 36.111%; height: 230px; overflow: hidden; border-radius: 6px 6px 0 0; background: #fff; box-shadow: 0 -6px 30px rgba(0,0,0,.18); }
.modulus-store-left { left: 4.167%; }
.modulus-store-right { right: 4.167%; }
.modulus-store-center { width: 45.833%; height: 280px; left: 27.083%; }
.modulus-browser-bar { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; background: #e6e6e6; }
.modulus-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #b5b5b5; }
.modulus-store > img { display: block; width: 100%; height: calc(100% - 24px); object-fit: cover; }

@media (min-width: 1441px) {
    .modulus-banner-inner { padding-left: 740px; padding-right: 100px; }
}
@media (min-width: 769px) and (max-width: 1379px) {
    .header .mainnav ul li a { margin-left: 8px; font-size: 17px; padding-left: 6px; padding-right: 6px; }
    .header .mainnav ul { margin-right: 15px; }
    .header .logo { padding-left: 25px; }
    .modulus-hero-copy h2 { font-size: 60px; line-height: 66px; }
    .modulus-hero-copy p { font-size: 20px; line-height: 30px; }
    .modulus-banner h2 { font-size: 44px; line-height: 50px; }
    .modulus-banner h3 { font-size: 23px; line-height: 32px; }
    .modulus-prompt { padding-right: 14px; gap: 8px; }
    .modulus-prompt input[type=text] { font-size: 16px; }
    .modulus-prompt button { padding-right: 12px; padding-left: 12px; }
    .modulus-prompt-example { right: 15px; }
    .modulus-footer-option { font-size: 17px; }
    .modulus-about h2 { font-size: 60px; line-height: 66px; }
}
/* Keep the expanded navigation in the menu at narrow tablet widths. */
@media (min-width: 769px) and (max-width: 1023px) {
    .header, .header.slim { height: 66px; }
    .header .logo, .header.slim .logo { padding: 10px 0 0 10px; }
    .header .logo img { width: 120px; }
    .header .mainnav .toggle { display: block; margin: 22px 10px 0 0; }
    .header .mainnav #nav-icon4 { position: relative; width: 30px; height: 22px; }
    .header .mainnav #nav-icon4 span:not(.hidden) { position: absolute; width: 30px; height: 4px; left: 0; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
    .header .mainnav #nav-icon4 span:nth-child(2) { top: 0; }
    .header .mainnav #nav-icon4 span:nth-child(3) { top: 9px; }
    .header .mainnav #nav-icon4 span:nth-child(4) { top: 18px; }
    .header .mainnav #nav-icon4.open span:nth-child(2) { top: 9px; transform: rotate(45deg); }
    .header .mainnav #nav-icon4.open span:nth-child(3) { opacity: 0; }
    .header .mainnav #nav-icon4.open span:nth-child(4) { top: 9px; transform: rotate(-45deg); }
    .header .mainnav .wrapper { display: block; background: #333; width: 100%; position: absolute; left: 0; top: 66px; margin: 0; height: 0; overflow: hidden; }
    .header .mainnav ul { padding: 0; margin: 0; width: 100%; }
    .header .mainnav ul li { display: block; width: 100%; clear: both; margin: 0; }
    .header .mainnav ul li a { padding: 10px; margin: 5px 10px; font-size: 28px; text-align: center; }
    .header .mainnav ul li a.modulus-nav-link { width: max-content; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
    .header .mainnav ul li a.modulus-nav-link { width: max-content; max-width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
    .mainbanner.has-modulus { min-height: 812px; }
    .mainbanner .slide.modulus-hero { width: calc(100% + 30px); left: -15px; }
    .modulus-hero::before { width: 700px; height: 500px; left: calc(50% - 387.5px); top: 380px; }
    .modulus-hero-art { width: 640px; height: 372px; left: calc(50% - 337.5px); top: 452px; }
    .modulus-hero-copy { top: 104px; right: 20px; width: calc(100% - 40px); max-width: 500px; }
    .modulus-new { padding: 4px 12px; font-size: 14px; line-height: 20px; }
    .modulus-logo-hero { margin-top: 18px; width: 172px; height: 30px; }
    .modulus-logo-hero img { transform: scale(.75); transform-origin: right top; }
    .modulus-hero-copy h2 { margin-top: 12px; font-size: 42px; line-height: 46px; }
    .modulus-hero-copy p { margin-top: 12px; font-size: 17px; line-height: 26px; }
    .modulus-desktop-copy { display: none; }
    .modulus-hero-copy .modulus-start { margin-top: 22px; padding: 9px 22px; font-size: 20px; line-height: 28px; }
    .modulus-hero-copy small { margin-top: 10px; font-size: 14px; line-height: 20px; }
    .mainbanner.has-modulus .arrowleft, .mainbanner.has-modulus .arrowright { display: none; }
    .mainbanner.has-modulus .slide-down { bottom: 19px; }
    .modulus-banner-inner { min-height: 880px; padding: 56px 20px 0; }
    .modulus-banner-inner::before { width: 700px; height: 600px; left: calc(50% - 337.5px); top: 440px; }
    .modulus-eyebrow { font-size: 14px; line-height: 20px; }
    .modulus-logo-banner { width: 86px; height: 15px; }
    .modulus-logo-banner img { transform: scale(.83333); transform-origin: right top; }
    .modulus-banner h2 { font-size: 38px; line-height: 42px; margin-top: 14px; }
    .modulus-banner h3 { font-size: 20px; line-height: 28px; margin-top: 8px; }
    .modulus-banner-copy > p { max-width: none; font-size: 16px; line-height: 25px; margin-top: 12px; }
    .modulus-prompt { display: flex; flex-direction: column; align-items: stretch; background: transparent; padding: 0; gap: 12px; margin-top: 22px; }
    .modulus-prompt:focus-within { outline: none; }
    .modulus-prompt input[type=text] { width: 100%; flex: none; padding: 15px 16px; height: 56px; border-radius: 12px; font-size: 16px; line-height: 26px; }
    .modulus-prompt input[type=text]:focus { outline: 3px solid #8f81bb; outline-offset: 3px; }
    .modulus-prompt button { padding: 12px 16px; border-radius: 12px; background: #fff; color: #111114; font-size: 18px; line-height: 28px; }
    .modulus-prompt button:hover { background: #e6e0f5; }
    .modulus-benefits { flex-direction: column; gap: 4px; margin-top: 16px; font-size: 14px; line-height: 22px; }
    .modulus-agency-link { margin-top: 20px; font-size: 15px; line-height: 22px; }
    .modulus-banner-visual { position: relative; width: calc(100% + 20px); max-width: 500px; left: auto; top: auto; margin: 46px -10px 31px; }
    .modulus-prompt-example { top: 52px; right: 40px; padding: 8px 12px; }
    .modulus-prompt-example > span { font-size: 11px; line-height: 15px; }
    .modulus-prompt-example strong { font-size: 14px; line-height: 20px; }
    .modulus-footer-actions { flex-direction: column; gap: 26px; }
    .modulus-footer-option { flex-direction: column; gap: 4px; font-size: 17px; line-height: 24px; }
    .footer .modulus-footer-actions > .btn { font-size: 21px; line-height: 30px; padding: 10px 26px; }
    .footer .details { padding-top: 34px; }
    .modulus-about-copy { padding-top: 48px; }
    .modulus-about h2 { font-size: 38px; line-height: 44px; }
    .modulus-about p { font-size: 18px; line-height: 28px; }
    .modulus-about .modulus-about-start { font-size: 19px; padding-left: 18px; padding-right: 18px; }
    .modulus-about-stores { margin-top: 50px; height: 205px; min-width: 375px; left: 50%; transform: translateX(-50%); }
    .modulus-store { height: 170px; width: 55%; }
    .modulus-store-left { left: -12%; }
    .modulus-store-right { right: -12%; }
    .modulus-store-center { height: 205px; width: 78%; left: 11%; }
}
@media (max-width: 359px) {
    .modulus-banner h2 { font-size: 33px; }
    .modulus-agency-link { font-size: 13px; }
    .modulus-prompt-example { right: 15px; }
}