.creator-landing {
.onboarding{position:relative;height:270svh;background:var(--mint);scroll-margin-top:0;--journey-progress:0;--phone-angle:-5deg}
.onboard-sticky{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;padding:28px 24px 22px;isolation:isolate;color:#10120d;display:flex;flex-direction:column;align-items:center}
.onboard-rings{position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:repeating-radial-gradient(ellipse at 50% 66%,transparent 0 105px,rgba(126,182,87,.105) 108px 174px,transparent 177px 253px),radial-gradient(ellipse at 50% 66%,#a9de87 0,transparent 51%);transform:scale(calc(1 + var(--journey-progress)*.09)) translateY(calc(var(--journey-progress)*-24px))}
.onboard-heading{text-align:center;position:relative;z-index:2;flex:none}
.onboard-heading h2{font-family:var(--tight);font-size:clamp(36px,4.7vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:600;margin:0}
.onboard-heading p{font-size:clamp(16px,1.45vw,19px);line-height:1.45;max-width:820px;margin:14px auto 0;text-wrap:balance}
.onboard-tabs{display:flex;width:fit-content;margin:22px auto 0;padding:5px;background:#f7f6ef;border-radius:999px;gap:4px}
.onboard-tabs button{padding:9px 28px;min-height:44px;min-width:112px;border-radius:999px;font-family:var(--tight);font-size:21px;line-height:1.1;font-weight:700;transition:background .25s,color .25s}
.onboard-tabs button[aria-selected="true"]{background:#10120d;color:#d3fa99}
.onboard-tabs button:focus-visible,.onboard-apply:focus-visible{outline:3px solid #10120d;outline-offset:4px}
.onboard-scenes{position:relative;width:min(1180px,100%);flex:1;min-height:0;margin-top:22px}
.onboard-scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(22px);transition:opacity .45s,transform .55s,visibility .45s}
.onboard-scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.onboard-copy{grid-column:1;text-align:center;max-width:330px;justify-self:center;padding:0 8px}
.onboard-number{display:block;font-size:clamp(54px,6vw,84px);font-family:var(--tight);font-weight:600;letter-spacing:-.05em;line-height:1;margin-bottom:20px}
.onboard-copy h3{font-size:clamp(25px,2.6vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.035em;text-wrap:balance;margin:0}
.onboard-apply{background:#10120d;color:#d3fa99;padding:14px 24px;min-height:50px;border-radius:10px 26px 10px 26px;font-size:17px;font-weight:600;margin-top:28px}
.onboard-apply:hover{background:#27351b}
.onboard-phone{--phone-height:clamp(410px,58svh,580px);height:var(--phone-height);width:calc(var(--phone-height)*.51);grid-column:2;justify-self:center;position:relative;background:#080909;border:1px solid #999c96;border-radius:calc(var(--phone-height)*.08);padding:10px;box-shadow:0 28px 65px #31572b2b,0 3px 0 #ffffff90 inset;transform:translateY(calc(var(--journey-progress)*-8px)) rotate(var(--phone-angle));transition:transform .35s ease-out}
.phone-screen{height:100%;border-radius:calc(var(--phone-height)*.064);background:#fafafd;overflow:hidden;display:flex;flex-direction:column;position:relative;padding:14px 13px 11px}
.phone-status{display:flex;justify-content:space-between;align-items:center;position:relative;flex:none;height:18px;font-family:var(--sans);font-size:12px;font-weight:700;padding:0 9px}
.phone-island{position:absolute;width:72px;height:20px;background:#080909;border-radius:99px;left:50%;top:-2px;transform:translateX(-50%)}
.phone-signal{letter-spacing:2px;font-size:11px}
.phone-contact{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:0 4px;flex:none}
.phone-contact>div{display:flex;align-items:center;flex-direction:column;gap:4px}
.phone-avatar{width:32px;height:32px;display:block;background:#fff;border-radius:50%;box-shadow:0 2px 6px #00000012}
.phone-avatar img{width:100%;height:100%}
.phone-contact b{font-size:12px;line-height:1.2;font-weight:650}.phone-contact b span{color:#8e8e93}
.phone-back,.phone-info{display:grid;place-items:center;border-radius:50%;height:30px;width:30px;color:#0787ff;background:white;box-shadow:0 1px 4px #00000012}
.phone-back{font-family:var(--sans);font-size:32px;line-height:1}
.phone-info{font-size:19px;font-family:Georgia,serif;font-style:italic}
.phone-timestamp{margin:18px 0 12px;font-size:9px;letter-spacing:1px;text-align:center;color:#939399;flex:none}
.phone-messages{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
.phone-message{max-width:91%;padding:8px 10px;border-radius:17px;font-family:var(--sans);font-size:clamp(12px,.96vw,14px);line-height:1.3;letter-spacing:-.02em;opacity:0;transform:translateY(12px) scale(.97)}
.phone-message.out{background:#0787ff;color:white;align-self:flex-end;border-bottom-right-radius:5px}
.phone-message.in{background:#e9e9eb;color:#171718;align-self:flex-start;border-bottom-left-radius:5px}
.onboarding.is-in-view .onboard-scene.is-active .phone-message{animation:message-arrive .48s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--message-order)*1.05s)}
.phone-composer{display:flex;align-items:center;gap:8px;padding-top:13px;flex:none;color:#929298}
.phone-composer>span{display:grid;place-items:center;border-radius:50%;background:#ececef;width:24px;height:24px;font-size:21px}
.phone-composer>div{border:1px solid #e3e3e7;border-radius:99px;padding:5px 10px;flex:1;font-size:11px;display:flex;justify-content:space-between;background:#fff}
.phone-home{width:76px;height:4px;border-radius:99px;background:#171718;flex:none;margin:10px auto 0}
.onboard-progress{height:3px;width:96px;background:#18281522;border-radius:99px;overflow:hidden;margin-top:16px;flex:none}
.onboard-progress span{display:block;height:100%;background:#192413;transform-origin:left;transform:scaleX(var(--journey-progress))}
}
@keyframes message-arrive{to{opacity:1;transform:translateY(0) scale(1)}}
.creator-landing {
@media(min-height:900px){.onboard-sticky{padding-top:48px;padding-bottom:30px}.onboard-scenes{margin-top:34px}}
@media(max-width:900px){.onboard-scene{grid-template-columns:1fr 1.2fr .25fr;gap:16px}.onboard-copy h3{font-size:28px}.onboard-phone{--phone-height:clamp(410px,56svh,530px)}.onboard-heading p{max-width:650px}.phone-message{font-size:13px}}
@media(max-width:600px){.onboarding{height:245svh}.onboard-sticky{padding:28px 16px 20px;min-height:660px}.onboard-heading h2{font-size:36px}.onboard-heading p{font-size:16px;line-height:1.45;margin-top:14px}.onboard-tabs{margin-top:18px}.onboard-tabs button{font-size:19px;min-width:104px;padding:9px 23px}.onboard-scenes{margin-top:20px}.onboard-scene{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:12px}.onboard-copy{padding:0}.onboard-number{font-size:48px;margin-bottom:14px}.onboard-copy h3{font-size:23px;line-height:1.13;text-wrap:initial}.onboard-apply{font-size:14px;line-height:1.25;padding:11px 12px;margin-top:22px;min-height:46px}.onboard-phone{--phone-height:390px;width:calc(var(--phone-height)*.49);padding:7px;transform:translateY(calc(var(--journey-progress)*-5px)) rotate(var(--phone-angle))}.phone-screen{padding:12px 9px 8px}.phone-message{font-size:11px;padding:7px 9px;border-radius:13px;line-height:1.3}.phone-messages{gap:8px}.phone-contact{margin-top:10px}.phone-avatar{width:27px;height:27px}.phone-timestamp{margin:13px 0 10px;font-size:8px}.phone-contact b{font-size:11px}.phone-island{width:57px;height:16px;top:0}.phone-status{font-size:10px;padding:0 5px}.phone-composer{padding-top:10px}.phone-composer>div{font-size:10px}.phone-home{margin-top:7px}.onboard-progress{margin-top:10px}}
@media(max-width:360px){.onboard-scene{gap:8px;grid-template-columns:.74fr 1.26fr}.onboard-phone{--phone-height:365px}.onboard-copy h3{font-size:21px}.phone-message{font-size:10px}}
@media(max-height:650px),(prefers-reduced-motion:reduce){.onboarding{height:auto}.onboard-sticky{position:relative;height:auto;min-height:0;padding-top:40px;padding-bottom:40px}.onboard-scenes{height:540px;flex:none}.onboard-phone{transform:none}.onboard-rings{transform:none}.onboard-progress{display:none}.onboard-scene{transition:none}.onboarding.is-in-view .onboard-scene.is-active .phone-message{animation:none;opacity:1;transform:none}}
@media(max-width:600px) and (max-height:650px){.onboard-scenes{height:410px}}

/* Match the supplied solid green section swatch. */
.onboard-sticky{background:var(--mint)}
.onboard-rings{background:none}
}