/* The public experience has its own rhythm; signed-in application styles stay scoped. */
body:not(.in-app) { background: #f7f8fa; }
.wl-nav { display: none; }
body:not(.in-app) .navbar { position: relative; z-index: 20; height: 100px; max-width: 1440px; margin: auto; padding: 0 5%; border: 0; background: transparent; box-shadow: none; gap: 32px; }
body:not(.in-app) .navbar .logo { margin: 0; flex-shrink: 0; }
body:not(.in-app) .brand-logo { width: 153px; height: 34px; }
body:not(.in-app) .wl-nav { display: flex; align-items: center; justify-content: center; gap: 35px; flex: 1; }
body:not(.in-app) .wl-nav a { color: #566070; font-size: 14px; text-decoration: none; transition: color .2s; }
body:not(.in-app) .wl-nav a:hover { color: #1755ed; }
body:not(.in-app) .nav-actions { margin-inline-start: auto; gap: 9px; }
body:not(.in-app) #guest-bar { gap: 8px; }
body:not(.in-app) #guest-bar .primary { border-radius: 40px; background: #2154ed; color: white; box-shadow: none; min-height: 43px; padding: 0 23px; font-size: 14px; }
body:not(.in-app) #guest-bar .quiet { color: #18233d; font-size: 14px; padding: 10px 14px; }
body:not(.in-app) #guest-language, body:not(.in-app) .theme-toggle { border-radius: 50%; border: 1px solid #dce1e9; background: transparent; width: 39px; height: 39px; color: #18233d; }
.welcome { --wl-paper: #f7f8fa; --wl-ink: #14213a; --wl-muted: #616c7c; --wl-blue: #2456ef; --wl-line: #dce1e9; --wl-card: #fff; --wl-soft: #eef1f6; color: var(--wl-ink); background: var(--wl-paper); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6; overflow: clip; }
.welcome[hidden] { display: none; }
.welcome *, .wl-nav * { box-sizing: border-box; }
.welcome h1, .welcome h2, .welcome h3, .welcome p, .welcome figure { margin: 0; }
.welcome h1, .welcome h2, .welcome h3 { color: inherit; font-family: "Manrope", sans-serif; }
.welcome button, .welcome a { -webkit-tap-highlight-color: transparent; }
.welcome button { font: inherit; }
.welcome button:focus-visible, .welcome a:focus-visible, .welcome summary:focus-visible, .wl-nav a:focus-visible { outline: 3px solid #ff9d55; outline-offset: 5px; }
.welcome [data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.welcome [data-icon] svg { width: 20px; height: 20px; }
.welcome section[id] { scroll-margin-top: 35px; }
.wl-hero { position: relative; max-width: 1440px; margin: auto; padding: 65px 5% 57px; display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; min-height: 708px; gap: 20px; }
.wl-hero-copy { position: relative; z-index: 3; padding-top: 5px; min-width: 0; }
.wl-eyebrow { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 500; margin-bottom: 27px; }
.wl-spark { font-size: 26px; line-height: 1; color: var(--wl-blue); }
.welcome h1 { font-size: clamp(56px, 6.4vw, 92px); font-weight: 800; line-height: 1.095; letter-spacing: -.075em; position: relative; text-wrap: balance; }
.wl-blue { color: var(--wl-blue); }
.wl-title-dot { position: absolute; width: 21px; height: 21px; background: #c5f165; border-radius: 50%; margin: 15px 0 0 18px; box-shadow: inset -5px -5px 7px #81b93b66; }
.welcome .wl-intro { color: var(--wl-muted); max-width: 460px; font-size: 17px; line-height: 1.8; margin-top: 27px; }
.wl-actions { display: flex; align-items: center; gap: 22px; margin-top: 33px; flex-wrap: wrap; }
.welcome .wl-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid transparent; min-height: 58px; padding: 15px 24px; border-radius: 40px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; }
.welcome .wl-button-blue { color: #fff; background: var(--wl-blue); box-shadow: 0 10px 25px #2456ef24; }
.welcome .wl-button:hover { transform: translateY(-4px); box-shadow: 0 14px 32px #2456ef38; }
.welcome .wl-button-blue:hover { background: #1646d8; }
.welcome .wl-button [data-icon] { transition: transform .25s; }
.welcome .wl-button:hover [data-icon] { transform: translateX(4px); }
.welcome .wl-text-button { color: var(--wl-ink); background: transparent; border: 0; padding: 9px 0; display: inline-flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none; }
.welcome .wl-text-button:hover { color: var(--wl-blue); }
.wl-play { border: 1px solid #ced5df; border-radius: 50%; width: 33px; height: 33px; }
.wl-play svg { width: 13px !important; height: 13px !important; }
.welcome .wl-footnote { display: flex; align-items: center; gap: 8px; color: var(--wl-muted); font-size: 11px; margin-top: 20px; }
.wl-footnote svg { width: 14px !important; height: 14px !important; }
.wl-hero-bottom { margin-top: 55px; display: flex; align-items: center; gap: 13px; max-width: 445px; }
.wl-asterisk { font-size: 43px; line-height: 1; color: var(--wl-blue); }
.wl-hero-bottom > span:nth-child(2) { font-size: 11px; line-height: 1.5; max-width: 80px; }
.wl-hero-line { height: 1px; flex: 1; background: var(--wl-line); margin: 0 12px; }
.wl-index { font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.welcome .wl-scene { min-width: 0; height: 540px; position: relative; perspective: 1200px; margin-inline-end: -10px; }
.wl-sphere { width: 410px; height: 410px; border-radius: 50%; position: absolute; inset: 5px auto auto 80px; background: radial-gradient(circle at 31% 23%, #82b6ff, #3469f5 36%, #1646d0 66%, #0b2a87 100%); box-shadow: inset -28px -28px 45px #09277c66, 14px 30px 65px #365fe333; }
.wl-orbit { width: 540px; height: 240px; position: absolute; left: 8px; top: 141px; border: 1px solid #a6b4cd80; border-radius: 50%; transform: rotate(-35deg); }
.wl-orbit-two { transform: rotate(59deg); opacity: .45; }
.wl-mini-sphere { width: 58px; height: 58px; position: absolute; right: 29px; bottom: 47px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #efffb2, #c4ee65 43%, #83b635); box-shadow: 8px 15px 26px #83b63528; animation: wl-float 7s ease-in-out infinite; }
.wl-scene-stage { position: absolute; inset: 0; transform: rotateX(var(--wl-tilt-y, 0deg)) rotateY(var(--wl-tilt-x, 0deg)); transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.wl-video-card { position: absolute; width: 360px; left: 75px; top: 60px; padding: 9px; border-radius: 24px; background: #fff; box-shadow: 2px 3px 0 #d1dbef, 5px 6px 0 #b8c7df, 8px 10px 0 #a4b4d1, 12px 20px 45px #10286630; transform: rotate(-8deg) translateZ(25px); }
.wl-card-chrome { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 7px 13px; color: #21324e; }
.wl-wordmark { font-family: "Manrope",sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.05em; }
.wl-wordmark > span { font-size: 7px; color: #235bf2; vertical-align: super; margin-left: 2px; }
.wl-preview-tag { font-size: 8px; color: #6c7d91; padding: 3px 7px; border: 1px solid #e4e9f0; border-radius: 20px; }
.wl-preview-picture { height: 280px; position: relative; border-radius: 15px; overflow: hidden; background: #534a3c; }
.wl-preview-picture img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; }
.wl-picture-shade { position: absolute; inset: 0; background: linear-gradient(transparent 55%, #091525b0); }
.wl-picture-label { position: absolute; inset: 12px auto auto 12px; display: flex; align-items: center; gap: 6px; background: #17201b60; border: 1px solid #ffffff35; backdrop-filter: blur(12px); color: #fff; font-size: 8px; padding: 5px 8px; border-radius: 20px; }
.wl-tiny-orb { width: 5px; height: 5px; background: #c8ef7c; border-radius: 50%; }
.wl-person { position: absolute; bottom: 17px; left: 16px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.wl-person strong { font-size: 14px; font-weight: 500; }
.wl-person > span { font-size: 9px; opacity: .8; }
.wl-wave { position: absolute; bottom: 26px; right: 17px; height: 19px; display: flex; align-items: center; gap: 3px; }
.wl-wave i { width: 3px; height: 10px; border-radius: 2px; background: #d7ff99; animation: wl-wave 1.5s ease-in-out infinite; }
.wl-wave i:nth-child(2n) { height: 19px; animation-delay: -.5s; }
.wl-wave i:nth-child(3) { height: 14px; animation-delay: -.9s; }
.wl-preview-controls { display: flex; align-items: center; gap: 6px; padding: 12px 3px 3px; color: #223147; }
.wl-preview-controls > [data-icon] { width: 32px; height: 32px; border: 1px solid #e4e9f0; border-radius: 50%; }
.wl-preview-controls svg { width: 13px !important; height: 13px !important; }
.wl-preview-next { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 12px; border-radius: 20px; color: white; background: #2456ef; padding: 7px 12px; font-size: 9px; }
.wl-hello-bubble { position: absolute; top: 75px; right: -6px; max-width: 210px; padding: 14px 19px; border: 1px solid #ffffff; background: #edf5ffeb; box-shadow: 0 10px 25px #11245e16; border-radius: 17px 17px 17px 4px; color: #204dd0; font-size: 12px; line-height: 1.6; transform: rotate(8deg) translateZ(70px); display: flex; align-items: center; gap: 10px; }
.wl-hello-bubble > span:first-child { font-size: 28px; }
.wl-chat-card { position: absolute; bottom: 44px; left: 2px; width: 310px; background: #fff; border: 1px solid #e1e8f2; border-radius: 18px; box-shadow: 0 18px 45px #142d6324; padding: 17px 19px 11px; color: #1d2d47; transform: rotate(4deg) translateZ(85px); }
.wl-chat-top { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #738197; }
.wl-chat-top > span:last-child { margin-inline-start: auto; font-size: 15px; color: #2456ef; }
.wl-chat-top svg { width: 12px !important; height: 12px !important; }
.welcome .wl-chat-card p { font-size: 16px; line-height: 1.5; padding: 15px 0 14px; letter-spacing: -.03em; }
.wl-chat-bottom { border-top: 1px solid #eef1f6; padding-top: 8px; display: flex; justify-content: space-between; color: #a2adbe; font-size: 11px; }
.wl-chat-bottom > span:last-child { color: white; background: #2456ef; border-radius: 50%; width: 20px; height: 20px; text-align: center; }
.wl-sticker { position: absolute; right: 7px; bottom: 140px; width: 108px; height: 108px; border-radius: 50%; background: #d8f58e; color: #203d1b; font-weight: 700; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(15deg) translateZ(45px); box-shadow: inset -5px -6px 9px #79a23b30, 0 8px 20px #273c1415; }
.wl-sticker span { font-size: 42px; font-weight: 400; }
.wl-scene figcaption { position: absolute; bottom: -17px; width: 100%; text-align: center; font-size: 9px; color: var(--wl-muted); opacity: .85; }
.wl-ribbon { padding: 47px max(5%, calc((100vw - 1296px) / 2)); background: #eaf0ff; display: flex; gap: 40px; align-items: center; }
.wl-ribbon-title { font-family: "Manrope",sans-serif; font-size: clamp(23px,2.7vw,38px); letter-spacing: -.055em; font-weight: 700; line-height: 1.25; flex: 1.1; }
.wl-ribbon-flower { font-size: 81px; line-height: 1; color: #2456ef; width: 130px; text-align: center; }
.welcome .wl-ribbon p { flex: 1; font-size: 14px; color: #586881; max-width: 340px; }
.wl-section { max-width: 1440px; margin: auto; padding: 106px 5% 0; }
.wl-section-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; margin-bottom: 46px; }
.welcome .wl-kicker { font-size: 10px; font-weight: 600; letter-spacing: .12em; display: flex; gap: 17px; align-items: center; padding-top: 9px; line-height: 1.5; }
.wl-kicker > span:first-child:not(:only-child) { color: #96a2b5; }
.welcome h2 { font-size: clamp(30px, 3.3vw, 47px); font-weight: 700; line-height: 1.2; letter-spacing: -.055em; max-width: 620px; }
.wl-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.wl-step { min-width: 0; }
.wl-step-art { height: 225px; border-radius: 20px; background: #edf0f6; position: relative; overflow: hidden; transition: transform .4s, box-shadow .4s; }
.wl-step:hover .wl-step-art { transform: translateY(-6px); box-shadow: 0 20px 45px #19386712; }
.wl-art-profile { background: #e9efff; }
.wl-profile-orb { position: absolute; left: calc(50% - 63px); top: 37px; border-radius: 50%; width: 126px; height: 126px; background: radial-gradient(circle at 30% 25%, #87b7ff, #3161e7 53%, #153394); box-shadow: 8px 14px 24px #2d54ba40; display: grid; place-items: center; }
.wl-profile-orb span { color: #f6fbff; font-size: 94px; line-height: 1; font-family: sans-serif; transform: rotate(-8deg); font-weight: 400; }
.wl-profile-chip { position: absolute; top: 139px; left: calc(50% - 5px); color: #2456ef; background: white; border-radius: 13px; padding: 5px 25px; font-size: 23px; box-shadow: 0 5px 20px #18326820; transform: rotate(-9deg); }
.wl-art-plus { position: absolute; top: 25px; right: 40px; color: #5f7ac9; font-size: 29px; font-weight: 400; }
.wl-art-meet { background: #e9eee3; }
.wl-meet-orb { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 25% 20%,#eaffb5,#b9d884 55%,#7b9e49); position: absolute; top: 39px; left: calc(50% - 88px); color: #294027; font-size: 32px; font-weight: 600; letter-spacing: -.06em; display: grid; place-items: center; transform: rotate(-16deg); box-shadow: 0 13px 24px #6c844430; }
.wl-meet-second { width: 97px; height: 97px; left: calc(50% + 0px); top: 82px; background: radial-gradient(circle at 25% 20%,#fff,#f3f5ed 55%,#cad2ba); color: #44533c; transform: rotate(14deg); }
.wl-art-spark { position: absolute; top: 26px; right: 36px; color: #678646; font-size: 35px; }
.wl-art-connect { background: #eeebf4; }
.wl-loop { width: 98px; height: 127px; border: 22px solid #ab98cb; border-radius: 60px; position: absolute; top: 40px; left: calc(50% - 82px); transform: rotate(-38deg); box-shadow: inset 3px 3px 5px #57408030, 5px 4px 0 #8b76aa, 10px 12px 23px #5d497440; }
.wl-loop-two { top: 65px; left: calc(50% - 8px); border-color: #e1dcf1; box-shadow: inset 3px 3px 5px #8d78aa30,5px 4px 0 #c1b7d6,10px 12px 23px #5d497430; transform: rotate(38deg); }
.wl-connect-star { position: absolute; top: 25px; right: 35px; font-size: 28px; color: #9a83ba; }
.wl-step-heading { display: flex; align-items: baseline; gap: 13px; margin-top: 23px; }
.wl-step-heading > span { font-size: 10px; color: #8591a2; }
.welcome .wl-step h3 { font-size: 19px; font-weight: 700; letter-spacing: -.04em; line-height: 1.4; }
.welcome .wl-step p { color: var(--wl-muted); font-size: 13px; line-height: 1.8; margin: 10px 4px 0 28px; max-width: 315px; }
.wl-discover { padding-top: 115px; }
.wl-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.wl-feature { background: var(--wl-card); border: 1px solid var(--wl-line); border-radius: 24px; overflow: hidden; transition: transform .4s, box-shadow .4s; }
.wl-feature:hover { transform: translateY(-6px); box-shadow: 0 25px 60px #142b5b10; }
.wl-feature-visual { height: 290px; overflow: hidden; position: relative; background: #f1f4fb; }
.wl-translation-stack { position: absolute; top: 66px; left: 17%; width: 68%; transform: rotate(-5deg); }
.wl-translation-message { border-radius: 13px; background: #fff; padding: 13px 17px; color: #253651; box-shadow: 0 12px 25px #244a9b12; }
.wl-translation-message > span { font-size: 8px; color: #8994a5; display: flex; align-items: center; gap: 5px; }
.welcome .wl-translation-message p { font-size: 13px; line-height: 1.5; padding-top: 5px; }
.wl-translated { transform: translate(20px,12px); background: #2456ef; color: #fff; }
.wl-translated > span { color: #b6ceff; }
.wl-translated svg { width: 10px !important; height: 10px !important; }
.wl-language-letters { position: absolute; inset: 0; font-size: 55px; font-family: "Manrope",sans-serif; font-weight: 700; color: #c1cfee; }
.wl-language-letters span { position: absolute; left: 28px; top: 15px; transform: rotate(-12deg); }
.wl-language-letters span:nth-child(2) { left: auto; right: 21px; top: 15px; transform: rotate(15deg); font-size: 47px; }
.wl-language-letters span:nth-child(3) { left: 22px; top: auto; bottom: -6px; font-size: 65px; transform: rotate(8deg); }
.wl-feature-copy { padding: 29px 35px 34px; }
.wl-feature-number { font-size: 10px; color: #8390a5; letter-spacing: .08em; }
.welcome .wl-feature h3 { font-size: 29px; letter-spacing: -.05em; font-weight: 700; line-height: 1.25; max-width: 360px; margin: 13px 0 13px; }
.welcome .wl-feature-copy > p { font-size: 13px; color: var(--wl-muted); line-height: 1.8; max-width: 370px; }
.wl-friends .wl-feature-visual { background: #eef1e8; }
.wl-friends-orbit { width: 260px; height: 260px; border: 1px solid #cdd9bc; border-radius: 50%; position: absolute; top: 18px; left: calc(50% - 130px); }
.wl-friends-orbit::after { content: ''; position: absolute; inset: 28px; border: 1px solid #d4ddc6; border-radius: 50%; }
.wl-friends-orbit span { position: absolute; display: grid; place-items: center; border-radius: 50%; width: 80px; height: 80px; background: radial-gradient(circle at 30% 20%,#e5ffb5,#bfd68c 60%,#7a994f); font-size: 63px; color: #435b2d; box-shadow: 5px 8px 18px #5474332b; line-height: 1; z-index: 1; }
.wl-friends-orbit span:nth-child(1) { top: 19px; left: -5px; transform: rotate(-15deg); }
.wl-friends-orbit span:nth-child(2) { top: -20px; right: 20px; width: 48px; height: 48px; color: #6e8e3b; background: #e4edce; font-size: 37px; box-shadow: none; }
.wl-friends-orbit span:nth-child(3) { top: 73px; right: -25px; width: 89px; height: 89px; background: radial-gradient(circle at 30% 20%,#fff,#e8ebdd 60%,#bdc5aa); color: #7a826b; transform: rotate(12deg); }
.wl-friends-orbit span:nth-child(4) { top: 115px; left: 40px; width: 50px; height: 50px; font-size: 25px; background: #cfdbb7; box-shadow: none; }
.wl-friends-orbit span:nth-child(5) { bottom: -12px; left: 70px; width: 68px; height: 68px; font-size: 50px; background: radial-gradient(circle at 30% 20%,#96adff,#5c78d2 60%,#3452a4); color: #e8eeff; transform: rotate(-9deg); }
.wl-friends-chip { position: absolute; left: 50%; top: 193px; transform: translateX(-50%) rotate(-4deg); z-index: 3; border: 1px solid #fff; border-radius: 12px; background: #ffffffeb; box-shadow: 0 8px 25px #4d643223; padding: 12px 18px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #384f24; white-space: nowrap; }
.wl-friends-chip svg { width: 14px !important; height: 14px !important; color: #81a64d; }
.wl-safety { max-width: 1296px; margin: 115px auto 0; border-radius: 26px; display: grid; grid-template-columns: 1fr 1.1fr; background: #eaf0ff; overflow: hidden; padding: 68px 6%; gap: 65px; }
.wl-safety-art { position: relative; min-height: 365px; display: grid; place-items: center; }
.wl-shield { width: 205px; height: 239px; border-radius: 95px; background: linear-gradient(135deg,#86adff,#2859e2 45%,#1138a0); transform: rotate(-13deg); box-shadow: inset 5px 5px 8px #ffffff50, inset -10px -12px 20px #14377780, 6px 9px 0 #1c3e9b, 14px 23px 40px #1c459742; z-index: 2; }
.wl-shield svg { width: 114px !important; height: 114px !important; color: #e7efff; stroke-width: 1.1; filter: drop-shadow(2px 3px 1px #12357960); }
.wl-safety-orbit { width: 340px; height: 340px; border: 1px solid #bbcae9; border-radius: 50%; position: absolute; }
.wl-safety-orbit::after { content: ''; position: absolute; inset: 30px; border: 1px dashed #b4c6e9; border-radius: 50%; }
.wl-safety-star { position: absolute; top: 3px; right: 30px; font-size: 80px; line-height: 1; color: #9ab6fd; z-index: 3; }
.wl-safety-18 { position: absolute; bottom: 24px; left: 17px; color: #29489a; font-size: 22px; font-weight: 700; transform: rotate(8deg); border: 1px solid white; border-radius: 40px; background: #d8e3ff; padding: 12px 20px; z-index: 3; box-shadow: 0 5px 12px #1c459720; }
.wl-safety-copy .wl-kicker { color: #516896; }
.welcome .wl-safety h2 { font-size: 38px; margin-top: 24px; max-width: 440px; }
.welcome .wl-safety-copy > p:not(.wl-kicker) { font-size: 13px; color: #60718c; line-height: 1.8; margin: 20px 0 21px; }
.wl-safety-list { margin: 0 0 17px; padding: 0; list-style: none; font-size: 12px; display: grid; gap: 10px; }
.wl-safety-list li { display: flex; align-items: center; gap: 11px; }
.wl-safety-list li > span:first-child { color: #2456ef; font-size: 17px; }
.wl-safety-copy .wl-text-button { font-size: 11px; border-bottom: 1px solid #bbcbed; padding-bottom: 7px; color: #2456ef; text-align: start; }
.wl-faq { display: grid; grid-template-columns: .9fr 1.4fr; gap: 70px; padding-top: 105px; }
.wl-faq .wl-section-head { display: block; margin: 0; }
.welcome .wl-faq h2 { max-width: 300px; margin-top: 20px; }
.wl-faq-items { border-top: 1px solid var(--wl-line); }
.wl-faq details { border-bottom: 1px solid var(--wl-line); }
.wl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 23px 0; cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary:hover { color: var(--wl-blue); }
.wl-faq-plus { width: 25px; height: 25px; border-radius: 50%; background: var(--wl-soft); display: grid; place-items: center; color: var(--wl-muted); flex-shrink: 0; transition: transform .25s; font-weight: 400; font-size: 19px; }
.wl-faq details[open] .wl-faq-plus { transform: rotate(45deg); color: var(--wl-blue); }
.welcome .wl-faq details p { margin: -3px 35px 23px 0; color: var(--wl-muted); font-size: 13px; line-height: 1.8; }
.wl-finale { max-width: 1296px; margin: 105px auto 0; position: relative; border-radius: 25px; background: #2456ef; color: #fff; padding: 72px 40px 65px; text-align: center; overflow: hidden; }
.welcome .wl-finale .wl-kicker { display: block; font-size: 10px; letter-spacing: .07em; position: relative; }
.welcome .wl-finale h2 { max-width: none; font-size: clamp(38px,4.8vw,66px); font-weight: 700; margin: 20px 0 30px; position: relative; }
.welcome .wl-button-white { background: #fff; color: #2456ef; position: relative; border: none; }
.welcome .wl-button-white:hover { box-shadow: 0 12px 30px #09278650; }
.welcome .wl-finale-note { color: #c7d6ff; font-size: 11px; margin-top: 20px; position: relative; }
.wl-finale-orbit { position: absolute; width: 530px; height: 530px; border: 1px solid #ffffff25; border-radius: 50%; top: -80px; left: -280px; }
.wl-finale-orbit::after { content: ''; position: absolute; inset: 35px; border: 1px solid #ffffff15; border-radius: 50%; }
.wl-finale-spark { position: absolute; right: -12px; bottom: -38px; font-size: 270px; line-height: 1; color: #ffffff0c; transform: rotate(17deg); }
.wl-footer { max-width: 1440px; padding: 75px 5% 0; margin: auto; }
.wl-footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 50px; padding-bottom: 55px; }
.wl-footer-logo { font: 800 36px/1 "Manrope",sans-serif; color: var(--wl-ink); letter-spacing: -.075em; text-decoration: none; }
.wl-footer-logo > span { color: var(--wl-blue); font-size: 11px; vertical-align: super; margin-left: 3px; }
.welcome .wl-footer-brand p { font-size: 12px; color: var(--wl-muted); margin: 14px 0 19px; }
.wl-adult-pill { font-size: 9px; color: var(--wl-muted); border: 1px solid var(--wl-line); border-radius: 30px; padding: 5px 10px; display: inline-block; }
.wl-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.welcome .wl-footer-group h3 { font: 600 11px/1.5 "DM Sans",sans-serif; margin-bottom: 5px; }
.wl-footer-group a, .wl-footer-group button { padding: 0; background: transparent; border: 0; font-size: 12px; color: var(--wl-muted); text-decoration: none; text-align: start; cursor: pointer; line-height: 1.8; }
.wl-footer-group a:hover, .wl-footer-group button:hover { color: var(--wl-blue); }
.wl-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--wl-line); padding: 22px 0; color: var(--wl-muted); font-size: 10px; }
.wl-footer-bottom a { display: grid; place-items: center; width: 30px; height: 30px; background: var(--wl-card); border: 1px solid var(--wl-line); border-radius: 50%; color: var(--wl-ink); font-size: 15px; text-decoration: none; }
.wl-motion-ready [data-wl-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.wl-motion-ready [data-wl-reveal].wl-visible { opacity: 1; transform: translateY(0); }
.wl-steps [data-wl-reveal]:nth-child(2) { transition-delay: .08s; }
.wl-steps [data-wl-reveal]:nth-child(3) { transition-delay: .16s; }
@keyframes wl-float { 50% { transform: translateY(-15px); } }
@keyframes wl-wave { 50% { transform: scaleY(.5); } }
[dir="rtl"] .wl-hero-copy { text-align: right; }
[dir="rtl"] .welcome h1 { letter-spacing: -.025em; font-size: clamp(53px,5.5vw,80px); }
[dir="rtl"] .welcome h2, [dir="rtl"] .welcome h3 { letter-spacing: -.02em; }
[dir="rtl"] .wl-scene { direction: ltr; }
[dir="rtl"] .wl-step p { margin: 10px 28px 0 4px; }
[dir="rtl"] .wl-footer-group { align-items: flex-start; }
/* Dark mode follows the user's existing appearance preference. */
[data-theme="dark"] body:not(.in-app) { background: #111a2b; }
[data-theme="dark"] .welcome { --wl-paper: #111a2b; --wl-ink: #f0f4ff; --wl-muted: #a5b0c4; --wl-blue: #8eafff; --wl-line: #2d3b53; --wl-card: #172238; --wl-soft: #22314a; }
[data-theme="dark"] body:not(.in-app) .wl-nav a { color: #b1bdd1; }
[data-theme="dark"] body:not(.in-app) #guest-bar .quiet, [data-theme="dark"] body:not(.in-app) #guest-language, [data-theme="dark"] body:not(.in-app) .theme-toggle { color: #e6edff; border-color: #354058; }
[data-theme="dark"] .wl-ribbon, [data-theme="dark"] .wl-safety { background: #1b2b4b; }
[data-theme="dark"] .wl-ribbon p, [data-theme="dark"] .wl-safety-copy > p:not(.wl-kicker) { color: #abbada; }
[data-theme="dark"] .wl-safety-copy .wl-kicker { color: #b2c6f0; }
[data-theme="dark"] .wl-safety-copy .wl-text-button { color: #a2bdff; border-color: #465e8a; }
[data-theme="dark"] .welcome .wl-button-blue { background: #2e61ec; color: #fff; }
[data-theme="dark"] .wl-play { border-color: #405271; }
[data-theme="dark"] .wl-feature-visual { background: #26344f; }
[data-theme="dark"] .wl-friends .wl-feature-visual { background: #2e3b30; }
[data-theme="dark"] .wl-art-profile { background: #263756; }
[data-theme="dark"] .wl-art-meet { background: #2e3b30; }
[data-theme="dark"] .wl-art-connect { background: #343045; }
[data-theme="dark"] .wl-finale h2 { color: white; }
@media(min-width:1441px) { .wl-safety, .wl-finale { max-width: 1296px; } }
@media(max-width:1200px) { .wl-hero { padding-top: 45px; gap: 0; min-height: 660px; } .wl-scene { transform: scale(.88); transform-origin: 40% 50%; } .wl-actions { gap: 15px; } .welcome .wl-button { padding: 14px 20px; gap: 15px; } .welcome .wl-text-button { font-size: 12px; } .wl-safety, .wl-finale { margin-inline: 5%; } .wl-safety { padding: 50px 5%; gap: 30px; } .wl-safety-art { transform: scale(.9); } }
@media(max-width:1000px) { body:not(.in-app) .navbar { gap: 20px; height: 85px; } body:not(.in-app) .wl-nav { gap: 20px; } .wl-hero { min-height: 620px; grid-template-columns: 1fr 1fr; padding-top: 40px; padding-bottom: 25px; } .welcome h1 { font-size: 66px; } .welcome .wl-intro { font-size: 15px; max-width: 350px; } .wl-scene { transform: scale(.75); transform-origin: 15% 40%; width: 540px; } .wl-hero-copy { z-index: 5; } .wl-actions { align-items: flex-start; gap: 12px; flex-direction: column; } .wl-hero-bottom { margin-top: 28px; } .wl-title-dot { width: 14px; height: 14px; margin-left: 9px; } .wl-section { padding-top: 80px; } .wl-section-head { gap: 25px; grid-template-columns: .8fr 1.2fr; } .wl-steps { gap: 20px; } .wl-step-art { height: 200px; } .wl-feature-copy { padding: 25px; } .welcome .wl-feature h3 { font-size: 25px; } .wl-safety { margin-top: 80px; gap: 10px; grid-template-columns: .8fr 1.2fr; } .wl-safety-art { transform: scale(.75); transform-origin: 40% 50%; } .welcome .wl-safety h2 { font-size: 32px; } .wl-faq { gap: 40px; grid-template-columns: .9fr 1.3fr; } .wl-finale { margin-top: 80px; } }
@media(max-width:760px) { body:not(.in-app) .navbar { height: 79px; padding: 0 5%; gap: 14px; flex-wrap: nowrap; } body:not(.in-app) .wl-nav { display: none; } body:not(.in-app) .brand-logo { width: 129px; height: 29px; } body:not(.in-app) .nav-actions { gap: 6px; } body:not(.in-app) #guest-bar { gap: 4px; } body:not(.in-app) #guest-bar .quiet { padding: 8px 9px; font-size: 12px; } body:not(.in-app) #guest-bar .primary { min-height: 37px; padding: 0 17px; font-size: 12px; } body:not(.in-app) #guest-language, body:not(.in-app) .theme-toggle { width: 33px; height: 33px; min-height: 33px; } body:not(.in-app) #guest-language svg, body:not(.in-app) .theme-toggle svg { width: 15px; height: 15px; } .wl-hero { grid-template-columns: 1fr; min-height: auto; padding: 38px 6% 0; text-align: center; } .wl-hero-copy { padding: 0; } .wl-eyebrow { justify-content: center; font-size: 11px; margin-bottom: 23px; } .wl-spark { font-size: 23px; } .welcome h1 { font-size: clamp(49px,9.8vw,74px); letter-spacing: -.07em; } .welcome .wl-intro { margin: 23px auto 0; max-width: 430px; font-size: 15px; } .wl-actions { align-items: center; justify-content: center; flex-direction: row; gap: 18px; margin-top: 26px; } .welcome .wl-button { min-height: 53px; } .welcome .wl-footnote { justify-content: center; font-size: 10px; margin-top: 16px; } .wl-hero-bottom { display: none; } .welcome .wl-scene { height: 510px; width: 540px; transform: scale(.88); transform-origin: 50% 50%; margin: 3px auto 0; justify-self: center; } .wl-scene figcaption { bottom: 0; } .wl-ribbon { padding: 34px 6%; gap: 23px; flex-wrap: wrap; } .wl-ribbon-title { flex: 1; min-width: 210px; font-size: 29px; } .wl-ribbon-flower { width: 70px; font-size: 65px; } .welcome .wl-ribbon p { flex: auto; max-width: 100%; font-size: 13px; } .wl-section { padding: 65px 6% 0; } .wl-section-head { display: block; margin-bottom: 30px; } .welcome .wl-kicker { font-size: 9px; padding: 0; } .welcome h2 { font-size: 34px; margin-top: 19px; max-width: 450px; } .wl-steps { gap: 30px; grid-template-columns: 1fr; } .wl-step { display: grid; grid-template-columns: 190px 1fr; gap: 0 25px; align-items: center; } .wl-step-art { grid-row: span 2; height: 190px; } .wl-step-heading { margin-top: 10px; align-self: end; } .welcome .wl-step h3 { font-size: 20px; } .welcome .wl-step p { margin: 10px 0 15px 26px; align-self: start; } .wl-feature-grid { gap: 20px; } .wl-feature-copy { padding: 22px; } .welcome .wl-feature h3 { font-size: 24px; } .wl-feature-visual { height: 240px; } .wl-translation-stack { left: 10%; width: 77%; top: 52px; } .wl-translation-message { padding: 10px 12px; } .welcome .wl-translation-message p { font-size: 11px; } .wl-language-letters { font-size: 40px; } .wl-friends-orbit { transform: scale(.8); transform-origin: 50% 0; } .wl-friends-chip { top: 175px; font-size: 8px; padding: 10px; gap: 6px; } .wl-safety { margin: 65px 6% 0; grid-template-columns: 1fr; padding: 20px 8% 36px; border-radius: 22px; gap: 0; } .wl-safety-art { min-height: 260px; height: 260px; transform: scale(.7); transform-origin: 50% 50%; } .wl-safety-star { top: -12px; right: 6%; } .wl-safety-18 { bottom: -15px; left: 9%; } .welcome .wl-safety h2 { margin-top: 19px; font-size: 34px; } .wl-faq { grid-template-columns: 1fr; gap: 25px; } .welcome .wl-faq h2 { max-width: 400px; } .wl-faq summary { font-size: 13px; padding: 20px 0; } .wl-finale { margin: 65px 6% 0; padding: 50px 23px 42px; } .welcome .wl-finale h2 { font-size: 41px; margin-top: 20px; } .wl-finale-spark { font-size: 200px; } .wl-finale-orbit { width: 410px; height: 410px; left: -310px; } .wl-footer { padding: 55px 6% 0; } .wl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 30px; padding-bottom: 35px; } .wl-footer-brand { grid-column: span 2; } .wl-footer-logo { font-size: 33px; } .wl-footer-bottom > span:nth-child(2) { display: none; } [dir="rtl"] .wl-hero-copy { text-align: center; } [dir="rtl"] .welcome h1 { font-size: clamp(44px,8.5vw,68px); } [dir="rtl"] .wl-step p { margin: 10px 26px 15px 0; } }
@media(max-width:480px) { body:not(.in-app) .brand-logo { width: 105px; height: 26px; } body:not(.in-app) .navbar { height: 73px; gap: 8px; padding: 0 5%; } body:not(.in-app) .nav-actions { gap: 4px; } body:not(.in-app) #guest-bar { gap: 3px; } body:not(.in-app) #guest-bar .quiet { padding: 8px 6px; font-size: 11px; } body:not(.in-app) #guest-bar .primary { padding: 0 13px; font-size: 11px; min-height: 34px; } body:not(.in-app) #guest-language, body:not(.in-app) .theme-toggle { width: 29px; height: 29px; min-height: 29px; padding: 5px; } .wl-hero { padding-top: 30px; } .wl-eyebrow { font-size: 10px; gap: 7px; } .wl-eyebrow .wl-spark { font-size: 20px; } .welcome h1 { font-size: clamp(46px,11.2vw,58px); } .wl-title-dot { width: 11px; height: 11px; margin: 9px 0 0 8px; } .welcome .wl-intro { font-size: 14px; line-height: 1.75; max-width: 345px; } .wl-actions { flex-direction: column; gap: 7px; } .welcome .wl-button { min-height: 52px; padding: 13px 22px; font-size: 13px; gap: 22px; } .welcome .wl-text-button { font-size: 12px; } .welcome .wl-footnote { font-size: 9px; margin-top: 12px; gap: 5px; } .welcome .wl-scene { transform: scale(.64); margin-top: -65px; margin-bottom: -82px; height: 540px; } .wl-scene figcaption { bottom: 15px; font-size: 11px; } .wl-ribbon-title { font-size: 27px; min-width: 190px; } .wl-ribbon-flower { width: 42px; font-size: 52px; } .wl-ribbon { gap: 22px 12px; } .wl-section { padding-top: 55px; } .welcome h2 { font-size: 31px; } .wl-step { display: block; } .wl-step-art { height: 210px; } .wl-step-heading { margin-top: 20px; } .welcome .wl-step p { margin: 9px 0 0 27px; max-width: 100%; } .wl-steps { gap: 33px; } .wl-feature-grid { grid-template-columns: 1fr; gap: 22px; } .wl-feature-visual { height: 260px; } .wl-feature-copy { padding: 25px 26px 28px; } .welcome .wl-feature h3 { font-size: 29px; max-width: 300px; } .wl-translation-stack { top: 60px; left: 16%; width: 69%; } .welcome .wl-translation-message p { font-size: 13px; } .wl-friends-orbit { transform: scale(.88); top: 15px; } .wl-friends-chip { top: 193px; padding: 12px 16px; font-size: 10px; } .wl-safety { padding-inline: 25px; } .wl-safety-art { transform: scale(.66); margin: -7px -20px 3px; } .welcome .wl-safety h2 { font-size: 31px; } .welcome .wl-safety-copy > p:not(.wl-kicker) { font-size: 12px; } .wl-safety-list { font-size: 11px; } .welcome .wl-safety-copy .wl-text-button { font-size: 10px; gap: 8px; } .welcome .wl-finale h2 { font-size: 37px; } .welcome .wl-finale .wl-kicker { font-size: 9px; letter-spacing: .02em; } .welcome .wl-finale-note { font-size: 10px; } .wl-finale { margin-top: 55px; } .wl-footer-group a, .wl-footer-group button { font-size: 11px; } .wl-footer-group { gap: 8px; } [dir="rtl"] .wl-step p { margin: 9px 27px 0 0; } }
@media(max-width:350px) { body:not(.in-app) .brand-logo { width: 91px; } body:not(.in-app) .navbar { padding-inline: 4%; gap: 4px; } body:not(.in-app) .theme-toggle { width: 27px; height: 27px; min-height: 27px; } body:not(.in-app) #guest-bar .primary { padding-inline: 10px; } .welcome h1 { font-size: 43px; } .wl-title-dot { display: none; } .welcome .wl-scene { transform: scale(.55); margin-top: -95px; margin-bottom: -105px; } .wl-eyebrow { font-size: 9px; } .wl-ribbon-title { font-size: 24px; } .wl-ribbon-flower { font-size: 44px; } .welcome .wl-footnote { font-size: 8px; } }
@media(prefers-reduced-motion:reduce) { .welcome *, .welcome *::before, .welcome *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .wl-scene-stage { transform: none !important; } .wl-motion-ready [data-wl-reveal] { opacity: 1; transform: none; } }
.wl-hero { grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); }
body:not(.in-app) .theme-toggle { flex: 0 0 auto; }
@media(max-width:350px) { body:not(.in-app) .navbar { padding-inline: 8px; } body:not(.in-app) .theme-toggle { flex: 0 0 27px; } body:not(.in-app) #guest-bar .primary { padding-inline: 8px; } }
[lang="pl"] .welcome h1, [lang="de"] .welcome h1 { font-size: clamp(50px,5.1vw,74px); }
[lang="hi"] .welcome :is(h1,h2,h3) { letter-spacing: normal; line-height: 1.3; }
[lang="ja"] .welcome :is(h1,h2,h3), [lang="zh"] .welcome :is(h1,h2,h3) { letter-spacing: normal; }
@media(max-width:1000px) and (min-width:761px) { .wl-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } [lang="pl"] .welcome h1, [lang="de"] .welcome h1 { font-size: 53px; } }
@media(min-width:901px) { [dir="rtl"] .welcome .wl-scene { justify-self: end; margin-inline: 0; } }
@media(min-width:761px) and (max-width:900px) {
  .wl-hero { grid-template-columns: minmax(0,1fr); text-align: center; padding-top: 35px; padding-bottom: 5px; }
  .wl-eyebrow { justify-content: center; }
  .welcome h1 { font-size: 74px; }
  [lang="pl"] .welcome h1, [lang="de"] .welcome h1 { font-size: 64px; }
  .welcome .wl-intro { margin-inline: auto; max-width: 470px; }
  .wl-actions { flex-direction: row; justify-content: center; align-items: center; }
  .welcome .wl-footnote { justify-content: center; }
  .wl-hero-bottom { display: none; }
  .welcome .wl-scene { width: 540px; height: 520px; margin: 0; justify-self: center; transform: scale(.88); transform-origin: 50% 50%; }
  [dir="rtl"] .wl-hero-copy { text-align: center; }
}
@media(max-width:760px) { .wl-hero { grid-template-columns: minmax(0,1fr); } .welcome .wl-scene { margin-inline: 0; } [lang="pl"] .welcome h1, [lang="de"] .welcome h1 { font-size: clamp(34px,8.1vw,61px); } }
@media(max-width:350px) {
  body:not(.in-app) .navbar { flex-wrap: wrap; height: auto; min-height: 73px; padding-block: 12px; row-gap: 8px; }
  body:not(.in-app) .nav-actions { flex-shrink: 0; }
}
@media print { body:not(.in-app) .navbar, .wl-scene, .wl-actions, .wl-finale, .wl-footer { display: none; } .wl-motion-ready [data-wl-reveal] { opacity: 1; transform: none; } .welcome { background: white; color: black; } }