/* Approved discovery homepage. Text and interaction remain native HTML. */
body{background:var(--hw-card,#fff);height:auto;min-height:100dvh}
.welcome-header{background:transparent!important;border:0;padding-block:24px}
body>.welcome{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.8fr);gap:clamp(30px,5vw,80px);max-width:1720px;min-height:0;height:auto;flex:1 0 auto;padding:25px max(5vw,24px) 16px;align-items:center;grid-template-rows:auto}
.welcome-experience{position:relative;min-width:0;align-self:stretch;isolation:isolate;padding-top:12px}
.welcome-experience::before{content:'';position:absolute;inset:-90px -50px -16px -10vw;z-index:-1;background:radial-gradient(ellipse at 55% 68%,#d9c4ff80,transparent 70%);pointer-events:none}
.welcome-experience .welcome-copy{position:relative;inset:auto;max-width:none;transform:none;padding:0;display:block}
.welcome-copy h1{font-size:clamp(38px,4.3vw,68px);line-height:1.03;font-weight:500;letter-spacing:-.045em;max-width:610px;margin:0}
.welcome-copy .intro{font-size:clamp(15px,1.45vw,21px);line-height:1.5;margin:20px 0 25px;color:var(--hw-muted,#84819a)}
.welcome-discovery-tabs{position:relative;z-index:3;display:flex;gap:18px;max-width:540px}
.welcome-discovery-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0;padding:12px 3px 16px;border:0;border-bottom:2px solid #e9e3f3;background:transparent;color:var(--hw-muted,#84819a);font:500 15px/1.4 Manrope,Arial,sans-serif;cursor:pointer}
.welcome-discovery-tabs button svg{width:24px;height:24px;flex:none;color:#8654e5}
.welcome-discovery-tabs button[aria-selected=true]{color:var(--hw-accent,#803cff);border-color:var(--hw-accent,#803cff)}
.welcome-discovery-tabs button:hover{color:var(--hw-accent,#803cff)}
.welcome-scene{position:relative;max-width:740px;margin:-48px -20px -12px auto;height:clamp(320px,33vw,510px);pointer-events:none}
.welcome-social-globe{position:absolute;inset:auto 0 -20px auto;width:min(100%,620px);height:auto;max-height:115%;object-fit:contain;animation:welcome-drift 9s ease-in-out infinite}
.welcome-example{position:absolute;inset:12px 0 auto auto;display:flex;align-items:center;gap:15px;max-width:360px;padding:20px 23px;border-radius:24px;background:var(--hw-card,#fff);box-shadow:0 8px 35px #7144a414;color:var(--hw-ink,#211b35);z-index:2}
.welcome-example::after{content:'';position:absolute;top:calc(100% - 1px);left:42px;width:32px;height:44px;background:var(--hw-card,#fff);clip-path:polygon(0 0,100% 0,0 100%)}
.welcome-example strong{display:block;font-size:15px;line-height:1.45;font-weight:600}
.welcome-example p{font-size:13px;line-height:1.5;margin:6px 0 0;color:var(--hw-muted,#84819a)}
.welcome-example-icon svg{width:43px;height:43px;color:var(--hw-accent,#803cff)}
.welcome-example-enter{animation:welcome-example-in .25s ease-out}
.welcome .registration{grid-column:2;grid-row:1;align-self:center;padding:0;background:transparent!important;border:0;box-shadow:none;max-width:420px;width:100%;margin-inline-start:auto}
.registration .dialog-heading h2{font-size:36px;font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:0}
.registration .registration-intro{font-size:17px;line-height:1.5;margin:12px 0 38px;color:var(--hw-muted,#84819a)}
.welcome-footer{background:var(--hw-card,#fff);position:relative;z-index:2}
html[dir=rtl] .welcome-scene{margin-inline:0 auto}
html[dir=rtl] .welcome-example{right:auto;left:0}
html[dir=rtl] .welcome-example::after{left:auto;right:42px;transform:scaleX(-1)}
@keyframes welcome-drift{50%{transform:translateY(-6px)}}
@keyframes welcome-example-in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(min-width:1000px) and (min-height:760px){body{height:auto}.welcome-art{max-height:none}body>.welcome{grid-template-rows:auto;flex:1 0 auto}}
@media(max-width:1050px){body>.welcome{grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);gap:28px}.welcome-copy h1{font-size:44px}.welcome-example{max-width:290px;padding:16px}.welcome-scene{margin-top:0;height:330px}.welcome-discovery-tabs{gap:8px}.welcome-discovery-tabs button{font-size:13px;gap:6px}.registration .dialog-heading h2{font-size:30px}}
@media(max-width:700px){
 .welcome-header{padding:16px 20px 6px}body>.welcome{display:flex;flex-direction:column;gap:18px;padding:14px 22px 28px;max-width:500px}
 .welcome-experience{width:100%;padding:0}.welcome-copy h1{font-size:36px;max-width:340px}.welcome-copy .intro{font-size:14px;margin:12px 0 12px}
 .welcome-discovery-tabs{gap:8px}.welcome-discovery-tabs button{font-size:12px;padding:10px 2px;gap:5px}.welcome-discovery-tabs button svg{width:20px;height:20px}
 .welcome-scene{height:245px;margin:5px 0 0}.welcome-social-globe{width:280px;max-height:110%;bottom:-12px;right:10px}
 .welcome-example{max-width:240px;padding:12px 14px;top:2px;right:0;border-radius:18px;gap:10px}.welcome-example strong{font-size:12px}.welcome-example p{font-size:11px;margin-top:3px}.welcome-example-icon svg{width:30px;height:30px}.welcome-example::after{height:26px;width:22px}
 .welcome .registration{width:100%;max-width:none;margin:0}.registration .dialog-heading h2{font-size:28px;max-width:none}.registration .registration-intro{font-size:14px;margin:8px 0 22px}
}
@media(prefers-reduced-motion:reduce){.welcome-social-globe,.welcome-example-enter{animation:none}}
/* Reference cloud bank extends left of the globe, underneath the content. */
.welcome-scene::before{content:'';position:absolute;left:calc(-1 * max(5vw,24px));bottom:-16px;width:110%;height:80%;background:url('/assets/welcome-clouds.png') left bottom/100% 100% no-repeat;opacity:.65;pointer-events:none}
html[data-hw-theme=dark] .welcome-scene::before{opacity:.18}
@media(max-width:700px){.welcome-scene::before{left:-22px;width:calc(100% + 44px);opacity:.45}}

/* Video correction: one continuous illustration, no rectangular cloud layer. */
.welcome-scene::before{display:none}
.welcome-social-globe{width:100%;max-height:none;inset:auto 0 0 auto;animation:none;mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 96%,transparent 100%)}
.welcome-example{max-width:390px;padding:23px 25px;gap:17px}
.welcome-example strong{font-size:16px;font-weight:500}
.welcome-example p{font-size:14px}
.welcome-example-icon svg{width:49px;height:49px}
@media(min-width:1000px) and (min-height:760px){
 body{height:100dvh;min-height:100dvh}
 body>.welcome-header{padding-block:22px;flex:0 0 auto}
 body>.welcome{flex:1 1 0;min-height:0;max-width:1720px;grid-template-columns:minmax(0,1.65fr) minmax(340px,.8fr);grid-template-rows:minmax(0,1fr);padding-top:20px;padding-bottom:0;gap:clamp(35px,5vw,80px)}
 .welcome-experience{height:100%;min-height:0;padding-top:5px}
 .welcome-experience .welcome-copy{z-index:3;max-width:95%}
 .welcome-copy h1{font-size:clamp(44px,4.3vw,68px);max-width:600px}
 .welcome-copy .intro{margin:16px 0 22px}
 .welcome-discovery-tabs{max-width:500px}
 .welcome-scene{position:absolute;inset:0 -20px 0 -5vw;height:auto;max-width:none;margin:0;z-index:1}
 .welcome-social-globe{width:100%;height:78%;object-fit:contain;object-position:right bottom}
 .welcome-example{top:24%;right:0;width:36%;min-width:280px;max-width:390px}
 .welcome .registration{max-width:450px;align-self:center;transform:translateY(-12px)}
 body>.welcome-footer{flex:0 0 auto;min-height:48px}
}
@media(max-width:999px){.welcome-scene{height:350px;margin-top:0}.welcome-social-globe{height:100%;object-fit:contain}.welcome-example{padding:15px;max-width:290px}.welcome-example strong{font-size:14px}.welcome-example p{font-size:12px}}
@media(max-width:700px){.welcome-scene{height:255px;margin-top:8px}.welcome-social-globe{width:calc(100% + 44px);right:-22px}.welcome-example{max-width:240px;padding:12px 14px;top:0}.welcome-example strong{font-size:12px}.welcome-example p{font-size:11px}.welcome-example-icon svg{width:34px;height:34px}}

/* Reference detail pass: type, heavier icons and continuous right-edge fade. */
@font-face{font-family:HWWelcomeInter;src:url('/assets/fonts/Inter-400.woff2') format('woff2'),url('/assets/fonts/Inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:HWWelcomeInter;src:url('/assets/fonts/Inter-500.woff2') format('woff2'),url('/assets/fonts/Inter-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:HWWelcomeInter;src:url('/assets/fonts/Inter-600.woff2') format('woff2'),url('/assets/fonts/Inter-600.ttf') format('truetype');font-weight:600;font-display:swap}
.welcome,.welcome button,.welcome input,.welcome select{font-family:HWWelcomeInter,Arial,sans-serif}
.welcome-copy h1{font-weight:500;letter-spacing:-.055em}
.registration .dialog-heading h2{font-weight:500;letter-spacing:-.04em}
.welcome-copy .intro,.registration .registration-intro{font-weight:400;letter-spacing:-.035em}
.welcome-discovery-tabs button{font-family:HWWelcomeInter,Arial,sans-serif;font-weight:500;letter-spacing:-.025em}
.welcome-discovery-tabs button svg{stroke-width:2.2}
.welcome-example strong{font-weight:500;letter-spacing:-.035em}
.welcome-example p{font-weight:400;letter-spacing:-.03em}
.welcome-example-icon{flex:none;display:flex;align-items:center;justify-content:center}
.welcome-example-icon img{display:block;width:49px;height:49px;object-fit:contain}
.welcome-experience::before{mask-image:linear-gradient(to right,#000 0%,#000 62%,#000b3 78%,#0004d 89%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 62%,#000b3 78%,#0004d 89%,transparent 100%)}
.welcome-social-globe{mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 77%,#000e6 85%,#00080 93%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 77%,#000e6 85%,#00080 93%,transparent 100%)}
@media(max-width:700px){.welcome-example-icon img{width:34px;height:34px}}

/* Silhouettes traced from the approved reference, not replacement glyphs. */
.welcome-discovery-tabs button img{display:block;width:28px;height:26px;object-fit:contain;flex:none}
.welcome-example-icon img{width:58px;height:58px;object-fit:contain}
@media(max-width:700px){.welcome-discovery-tabs button img{width:23px;height:22px}.welcome-example-icon img{width:40px;height:40px}}

/* Extend the cloud fade across the right edge instead of ending at the image box. */
.welcome-experience::before{
 mask-image:linear-gradient(to right,#000 0%,#000 48%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.12) 88%,transparent 98%);
 -webkit-mask-image:linear-gradient(to right,#000 0%,#000 48%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.12) 88%,transparent 98%);
}
.welcome-social-globe{
 mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 72%,rgba(0,0,0,.95) 78%,rgba(0,0,0,.7) 85%,rgba(0,0,0,.3) 91%,rgba(0,0,0,.06) 96%,transparent 99%);
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 72%,rgba(0,0,0,.95) 78%,rgba(0,0,0,.7) 85%,rgba(0,0,0,.3) 91%,rgba(0,0,0,.06) 96%,transparent 99%);
}
/* Fade the entire decorative layer as well: this catches the image's padding edge. */
.welcome-scene{isolation:isolate}
.welcome-scene::after{content:'';position:absolute;inset:0 -1px 0 auto;width:17%;background:linear-gradient(to right,transparent,var(--hw-card,#fff));pointer-events:none;z-index:1}
.welcome-example{z-index:2}

/* Reveal the actual page backdrop; never paint an assumed white/card colour. */
.welcome-scene::after{display:none;background:none}

/* Keep the right-hand cloud bank visible; fade only its outermost edge. */
.welcome-social-globe{
 mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 90%,rgba(0,0,0,.95) 92%,rgba(0,0,0,.75) 94%,rgba(0,0,0,.4) 96%,rgba(0,0,0,.1) 98%,transparent 100%);
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 90%,rgba(0,0,0,.95) 92%,rgba(0,0,0,.75) 94%,rgba(0,0,0,.4) 96%,rgba(0,0,0,.1) 98%,transparent 100%);
}

/* Slightly extend only the soft backdrop toward the form, keeping artwork fixed. */
@media(min-width:701px){
 .welcome-experience::before{right:-105px}
}

/* Apply the fade to the image itself, not to a letterboxed object-fit area. */
.welcome-social-globe{height:auto!important;max-height:none;object-fit:fill;aspect-ratio:3/2}
.welcome-experience::before{display:none}
body>.welcome{background-image:radial-gradient(ellipse at 29% 76%,rgba(217,196,255,.38) 0%,rgba(217,196,255,.24) 22%,rgba(217,196,255,.10) 39%,rgba(217,196,255,0) 64%);background-repeat:no-repeat}
@media(min-width:1000px) and (min-height:760px){.welcome-social-globe{width:min(100%,calc((100dvh - 230px) * 1.5))}}

/* Keep the speech tail above the same avatar at every artwork size. */
html .welcome-example.welcome-example-anchored{
 top:var(--woman-bubble-top);left:var(--woman-bubble-left);right:auto;bottom:auto;
}
html .welcome-example.welcome-example-anchored::after{
 left:var(--woman-bubble-tail);right:auto;transform:none;
}

/* Reserve the bubble's actual height before laying out the approved artwork.
   Its avatar sits at y=326/1536 of the image width. Keeping that overlap in
   normal flow prevents the bubble covering the tabs at narrow/short sizes. */
body{height:auto}
body>.welcome{flex:1 0 auto;grid-template-rows:auto;align-items:center}
.welcome-experience{height:auto;min-height:0}
.welcome-scene{
 position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto auto;row-gap:52px;height:auto;max-width:740px;
 margin:18px -20px 0 auto;
}
.welcome-social-globe{
 position:relative;inset:auto;grid-column:1;grid-row:2;justify-self:right;
 width:100%;margin-top:-21.224%;
}
.welcome-example{
 position:relative;grid-column:1;grid-row:1;justify-self:left;
 width:min(390px,100%);min-width:0;max-width:100%;margin:0;
}
html .welcome-example.welcome-example-anchored{top:0}
.welcome .registration{min-width:0;transform:none}

/* The same transparent artwork follows the page's day/night palette. */
html[data-hw-theme=dark] body>.welcome{
 background-image:radial-gradient(ellipse at 29% 76%,rgba(135,91,196,.16),rgba(135,91,196,.07) 39%,transparent 64%);
}
html[data-hw-theme=dark] .welcome-social-globe{filter:brightness(.78) saturate(.9)}
html[data-hw-theme=dark] .welcome-header,
html[data-hw-theme=dark] .welcome .registration{background:transparent!important}
.welcome-discovery-tabs button{border-bottom-color:var(--hw-border,#e9e3f3)}

@media(max-width:900px){
 body>.welcome{
  display:flex;flex-direction:column;gap:24px;max-width:none;
  padding:14px max(22px,calc((100% - 516px)/2)) 28px;
 }
 .welcome-experience{width:100%;padding:0}
 .welcome-experience .welcome-copy{max-width:none}
 .welcome-copy h1{font-size:clamp(36px,5.2vw,44px)}
 .welcome .registration{width:100%;max-width:none;margin:0}
 .welcome-scene{margin:16px 0 0}
 .welcome-example{width:min(290px,100%)}
}
@media(max-width:700px){
 body>.welcome{gap:18px;padding-inline:max(22px,calc((100% - 456px)/2))}
 .welcome-scene{row-gap:34px;margin-top:14px}
 .welcome-social-globe{
  width:calc(100% + 44px);right:-22px;
  margin-top:calc(-21.224% - 9.33856px);
 }
 .welcome-example{width:min(240px,100%)}
}