/* Assemble centrally, settle into the hero, then reveal the page in four and a half seconds. */
.customer-landing .hero{direction:ltr;grid-template-areas:"art copy"}
.customer-landing .hero-visual{grid-area:art}
.customer-landing .hero-copy{grid-area:copy;direction:rtl}
[lang=en] .customer-landing .hero-copy{direction:ltr}
.customer-landing .hero-visual{position:relative;min-width:0}
.customer-landing .hero-art{contain:layout paint}
.customer-landing .hero-art .flower,.customer-landing .hero-art .star{animation:none}
.intro-whirl{display:none;position:absolute;top:27%;left:22%;width:56%;aspect-ratio:1;z-index:4;pointer-events:none}
.intro-piece{position:absolute;object-fit:contain;width:32%;height:32%}
.piece-0{top:0;left:32%;transform:rotate(25deg)}
.piece-1{top:28%;right:0;transform:rotate(-25deg)}
.piece-2{bottom:0;right:15%;width:38%;height:38%;transform:rotate(65deg)}
.piece-3{bottom:9%;left:0;transform:rotate(-30deg)}
.piece-4{top:15%;left:0;transform:rotate(20deg)}
.is-intro .intro-whirl{display:block;animation:malama-whirl 2925ms cubic-bezier(.22,.7,.2,1) both}
.is-intro .hero-art:before{animation:malama-sun 2925ms ease-out both}
.is-intro .hero-art .landscape{animation:malama-island 2925ms cubic-bezier(.22,.7,.2,1) both}
.is-intro .hero-art .big-logo{animation:malama-wordmark 2925ms cubic-bezier(.22,.7,.2,1) both}
.is-intro .hero-art .palm{animation:malama-palm 2925ms cubic-bezier(.22,.7,.2,1) both}
.is-intro .hero-art .flower{animation:malama-flower 2925ms cubic-bezier(.22,.7,.2,1) both}
.is-intro .hero-art .star{animation:malama-star 2925ms cubic-bezier(.22,.7,.2,1) both}
html.welcome-playing{overflow:hidden}
.welcome-playing .customer-landing .hero-visual{z-index:10;animation:malama-center-to-slot 4500ms cubic-bezier(.65,0,.25,1) both;will-change:transform}
.welcome-playing #app > .topbar,.welcome-playing #app > .demo-banner,.welcome-playing #app > .footer,.welcome-playing .customer-landing .hero-copy,.welcome-playing .customer-landing .steps-strip,.welcome-playing .customer-landing .island-finish{animation:malama-page-reveal 4500ms ease-out both}
.welcome-playing body > .skip{visibility:hidden}
@keyframes malama-center-to-slot{
 0%,65%{transform:translate(var(--intro-x),var(--intro-y)) scale(var(--intro-scale))}
 90%,100%{transform:translate(0,0) scale(1)}
}
@keyframes malama-page-reveal{
 0%,90%{opacity:0;visibility:hidden}
 90.01%{opacity:0;visibility:visible}
 100%{opacity:1;visibility:visible}
}
@keyframes malama-whirl{
 0%{opacity:0;transform:rotate(-150deg) scale(.22)}
 12%{opacity:1}
 34%{opacity:1;transform:rotate(80deg) scale(1)}
 58%{opacity:.95;transform:rotate(285deg) scale(.82)}
 78%,100%{opacity:0;transform:rotate(430deg) scale(.08)}
}
@keyframes malama-sun{
 0%,20%{opacity:0;transform:translate(35%,40%) scale(.15)}
 67%{opacity:1;transform:translate(0,0) scale(1.04)}
 100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes malama-island{
 0%,36%{opacity:0;transform:translateY(95%) scale(.8)}
 83%,100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes malama-wordmark{
 0%,45%{opacity:0;transform:translate(-50%,65%) rotate(-12deg) scale(.65)}
 88%{opacity:1;transform:translate(-50%,0) rotate(2deg) scale(1.02)}
 100%{opacity:1;transform:translateX(-50%)}
}
@keyframes malama-palm{
 0%,30%{opacity:0;transform:translate(-75%,65%) rotate(-95deg) scale(.2)}
 86%{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1.02)}
 100%{opacity:1;transform:rotate(-10deg)}
}
@keyframes malama-flower{
 0%,36%{opacity:0;transform:translate(125%,-35%) rotate(160deg) scale(.18)}
 92%,100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes malama-star{
 0%,42%{opacity:0;transform:translate(-95%,-100%) rotate(-200deg) scale(.18)}
 94%,100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
@media(max-width:760px){
 .customer-landing .hero{grid-template-areas:"art" "copy";padding-block:22px 28px;gap:22px}
 .customer-landing .hero-visual{order:-1;width:100%;max-width:450px;margin-inline:auto}
 .customer-landing .hero-art{height:clamp(215px,59vw,280px);border-radius:85px 85px 28px 28px}
 .customer-landing .hero-art:before{width:145px;height:145px;top:10px;left:30px}
 .customer-landing .hero-art .big-logo{width:115px;top:25px}
 .customer-landing .hero-art .palm{width:125px;top:12px;right:-20px}
 .customer-landing .hero-art .flower{width:65px;top:90px}
 .customer-landing .hero-art .star{width:54px;right:22px;bottom:48px}
 .customer-landing .hero-copy{text-align:center;margin-inline:auto;width:100%}
 .customer-landing .hero-copy h1{font-size:clamp(32px,9.5vw,44px)}
 .customer-landing .hero-copy p{font-size:16px;margin-block:14px 18px}
 .customer-landing #start{width:100%;max-width:340px;min-height:52px;justify-content:center}
 .customer-landing .tiny-note{font-size:12px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
 html.welcome-playing{overflow:initial}
 .welcome-playing #app > .topbar,.welcome-playing #app > .demo-banner,.welcome-playing #app > .footer,.welcome-playing .customer-landing *,.customer-landing.is-intro .hero-art:before{animation:none!important;opacity:1;visibility:visible;transform:none}
 .customer-landing.is-intro .hero-art .big-logo{transform:translateX(-50%)}
 .customer-landing.is-intro .hero-art .palm{transform:rotate(-10deg)}
 .customer-landing .intro-whirl{display:none}
}
/* Living customer welcome; all motion stays behind the controls. */
.customer-landing .hero-art{background:linear-gradient(155deg,#80dcc3 0%,#62c6c6 55%,#fbdcb0 100%)}
.customer-landing .hero-art .landscape{width:210%;max-width:none;height:96%;left:-55%;bottom:-23%;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.customer-landing .hero-art .horizontal-wordmark{width:70%;height:auto;top:17%;filter:drop-shadow(0 1px 0 #17343215)}
.customer-landing .hero-copy{position:relative;isolation:isolate;padding-bottom:120px}
.customer-landing .hero-copy>h1,.customer-landing .hero-copy>p,.customer-landing .hero-copy>.eyebrow,.customer-landing .hero-copy>button,.customer-landing .hero-copy>.tiny-note{position:relative;z-index:2}
.customer-landing .landing-play{margin-inline-start:10px;background:#e5f6f0;color:#173432;border:1px solid #bddbd1;gap:12px}
.hero-surf-scene{position:absolute;pointer-events:none;inset:0;overflow:hidden;z-index:0;border-radius:30px}
.hero-wave{position:absolute;bottom:15px;left:-25%;width:150%;height:65px;border-radius:50% 50% 0 0;background:#62c6c622;transform-origin:center;animation:welcome-wave 9s ease-in-out infinite alternate}
.hero-wave.wave-back{bottom:35px;background:#80dcc32c;animation-duration:13s;animation-direction:alternate-reverse}
.hero-surfer-path{position:absolute;bottom:36px;left:0;width:100px;height:135px;animation:welcome-surf 11s ease-in-out infinite;will-change:transform}
.hero-surfer{height:100%;width:100%;object-fit:contain;animation:welcome-surf-hop 3.4s ease-in-out infinite}
.hero-floating-star{position:absolute;width:42px;right:8%;bottom:50px;animation:welcome-drift 8s ease-in-out infinite}
.hero-floating-flower{position:absolute;width:90px;left:5%;top:8px;opacity:.16;animation:welcome-drift 13s ease-in-out infinite reverse}
.welcome-playing .hero-surf-scene{visibility:hidden}
@keyframes welcome-surf{0%,100%{transform:translateX(-25px) rotate(-9deg)}45%,55%{transform:translateX(300px) rotate(10deg)}}
@keyframes welcome-surf-hop{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-18px) rotate(-8deg)}}
@keyframes welcome-wave{from{transform:translateX(-4%) rotate(-3deg)}to{transform:translateX(4%) rotate(3deg)}}
@keyframes welcome-drift{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-12px) rotate(12deg)}}
.confirmation-label{font-size:28px;font-weight:600;line-height:1.5;margin-top:26px;color:#173432}
.operations-check{display:flex;align-items:center;gap:12px;padding:20px;background:#e7f6f0;border:1px solid #bddbd1;border-radius:16px;margin-top:25px;font-size:19px;font-weight:600;cursor:pointer}
.operations-check input{width:24px;height:24px;flex:0 0 24px;accent-color:#287553}
.department.operations{border-top:5px solid #62c6c6}.department.operations [hidden]{display:none!important}
@media(max-width:760px){.customer-landing .hero-copy{padding-bottom:125px}.customer-landing .hero-art .horizontal-wordmark{width:70%;top:20%}.customer-landing .hero-art .landscape{height:98%;bottom:-23%;width:210%;left:-55%}.customer-landing .landing-play{display:flex;width:100%;max-width:340px;justify-content:center;margin:12px auto 0;min-height:52px}.hero-surfer-path{width:80px;height:110px;animation-name:welcome-surf-mobile}.confirmation-label{font-size:26px}.operations-check{font-size:17px;align-items:flex-start}.operations-check input{margin-top:3px}}
@keyframes welcome-surf-mobile{0%,100%{transform:translateX(-10px) rotate(-9deg)}45%,55%{transform:translateX(220px) rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.hero-surf-scene *{animation:none!important}.hero-surfer-path{left:20%}}
/* The landscape is physically clipped to the lower slot; it cannot cover the logo/sun. */
.customer-landing .hero-art .landscape-window{position:absolute;left:0;right:0;bottom:0;height:40%;overflow:hidden;background:#80dcc3;isolation:isolate}
.customer-landing .hero-art .landscape-window .landscape{width:100%;height:100%;left:0;top:0;bottom:auto;object-fit:cover;object-position:center;mix-blend-mode:normal;filter:none;opacity:1}
.customer-landing .hero-art .flower{top:34%}
@media(max-width:760px){.customer-landing .hero-art{height:clamp(280px,78vw,350px)}.customer-landing .hero-art .landscape-window{height:44%}.customer-landing .hero-art .flower{top:28%}}
.landing-audio-toggle{position:fixed;bottom:18px;inset-inline-start:18px;z-index:1100;border:1px solid #b9d9cf;border-radius:999px;padding:11px 18px;background:#fbfaf7;color:#173432;font:inherit;font-size:14px;cursor:pointer;max-width:calc(100vw - 36px)}
.landing-audio-toggle[aria-pressed=true]{background:#80dcc3}
body.surf-open .landing-audio-toggle{display:none}
@media(max-width:600px){.landing-audio-toggle{bottom:12px;inset-inline-start:12px;font-size:12px;padding:9px 14px}}