/* Isolated Figma 4140:1124 Hero experiment, based on the published 6908901c source. */
.page-wl.wl-hero-study{--study-scale:min(1,var(--s,1));--metric-scale:clamp(.8,var(--s,1),1);--metric-ratio:calc(var(--metric-scale) / var(--study-scale));--hero-cover-top:min(67.916667vw,1304px)}
.page-wl.wl-hero-study .wl-hero{height:min(67.916667vw,1304px);margin-top:0;overflow:hidden;background:#151515}
.page-wl .wl-study-canvas{position:absolute!important;left:50%!important;top:0!important;width:1920px!important;height:1304px!important;margin:0!important;padding:0!important;transform:translateX(-50%) scale(min(1,var(--s,1)))!important;transform-origin:top center;overflow:hidden}
.page-wl .wl-study-background{position:absolute;inset:0;overflow:hidden;mask:url(assets/wanlian-hero-study/background-mask.svg) 0 0/1920px 1304px no-repeat;pointer-events:none}
.page-wl .wl-study-background-base{position:absolute;left:0;top:0;max-width:none}
.page-wl .wl-study-scene{position:absolute;left:-381px;top:-222px;width:2649px;height:1987px;max-width:none;transform:scaleX(-1);filter:blur(8px)}
.page-wl .wl-study-foreground{position:absolute;left:-398.918px;top:1004.833px;width:653.834px;height:909.195px;max-width:none;transform:rotate(-6.6deg) skewX(.4deg);transform-origin:top left;filter:blur(12.1px)}
.page-wl .wl-study-vignette{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 1304' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-28.95 95.713 -140.93 -58.934 1207 510.9)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,0)' offset='0.46981'/><stop stop-color='rgba(0,0,0,0.44)' offset='1'/></radialGradient></defs></svg>")}
.page-wl .wl-study-shade{position:absolute;inset:0;background:rgba(0,0,0,.4)}
/* The divider stays visible between cards, without showing through their translucent surfaces. */
.page-wl .wl-study-bottom{position:absolute;bottom:0;left:0;width:1920px;height:12px;background:linear-gradient(to right,rgba(235,240,251,.3) 0 calc(1680px - 704px * var(--metric-ratio)),transparent calc(1680px - 704px * var(--metric-ratio)) calc(1680px - 497px * var(--metric-ratio)),rgba(235,240,251,.3) calc(1680px - 497px * var(--metric-ratio)) calc(1680px - 481px * var(--metric-ratio)),transparent calc(1680px - 481px * var(--metric-ratio)) calc(1680px - 293px * var(--metric-ratio)),rgba(235,240,251,.3) calc(1680px - 293px * var(--metric-ratio)) calc(1680px - 277px * var(--metric-ratio)),transparent calc(1680px - 277px * var(--metric-ratio)) 1680px,rgba(235,240,251,.3) 1680px)}
.page-wl .wl-study-canvas .hero-fixed-copy{left:236px;top:123px;bottom:auto;width:766px;height:409px}
.page-wl .wl-study-canvas h1{font-size:80px;line-height:96px;font-weight:600;white-space:nowrap}
.page-wl .wl-study-title-rule{position:absolute;top:116px;left:0}
.page-wl .wl-study-canvas .case-lead{position:absolute;top:144px;left:0;width:max(766px,calc(560px / var(--study-scale)));margin:0;font-size:max(20px,calc(16px / var(--study-scale)));line-height:1.65;color:#f0f0f0}
.page-wl .wl-study-canvas .brand-keep{top:123px;left:1612px;width:64px;height:64px;margin-top:0}
.page-wl .wl-study-tags{position:absolute;top:369px;left:0;width:766px;margin:0;gap:8px}
.page-wl .wl-study-tags span{height:40px;display:flex;align-items:center;justify-content:center;padding:8px 24px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:rgba(255,255,255,.4);color:#1b1b1a;font-size:16px;line-height:23px;white-space:nowrap}
.page-wl .wl-study-tags span:nth-child(1){width:197px}.page-wl .wl-study-tags span:nth-child(2){width:136px}.page-wl .wl-study-tags span:nth-child(3){width:120px}.page-wl .wl-study-tags span:nth-child(4){width:115px}.page-wl .wl-study-tags span:nth-child(5){width:78px}
.page-wl .wl-study-gallery{position:absolute;top:271px;left:-63.61328125px;width:2356px;height:909.333374px;display:flex;align-items:flex-end;gap:16px}
.page-wl .wl-study-card{position:relative;display:flex;flex:none;flex-direction:column;width:300px;height:537.195129px}
.page-wl .wl-study-output{display:block;width:300px;height:400px;max-width:none;object-fit:cover}
.page-wl .wl-study-input{position:relative;height:137.195129px;flex:none;background:#171716}
/* Share the available width between all seven fields; rotated text must stay inside the card padding. */
.page-wl .wl-study-input-row{position:absolute;left:17.80488px;right:17.80488px;top:14.634146px;height:107px;display:grid;grid-template-columns:73.170731px repeat(7,minmax(0,1fr));column-gap:7.317073px;align-items:start}
.page-wl .wl-study-portrait{position:relative;width:73.170731px;height:92.073166px;overflow:hidden}
.page-wl .wl-study-portrait img{position:absolute;left:0;top:-5.96%;width:100%;height:105.96%;max-width:none;object-fit:fill}
.page-wl .wl-study-field{position:relative;min-width:0;height:107px;color:#888}
.page-wl .wl-study-field>span{position:absolute;top:0;left:100%;transform:rotate(90deg);transform-origin:top left;font-family:'HarmonyOS Sans SC',var(--sans);font-size:12.805px;line-height:20px;white-space:nowrap}
.page-wl .wl-study-field.is-gold{color:#d8a24a}
.page-wl .wl-study-card:nth-last-child(-n+2){height:537.5px}.page-wl .wl-study-card:nth-last-child(-n+2) .wl-study-input{height:137.5px}
.page-wl .wl-study-card.is-featured{width:460px;height:909.333374px}
.page-wl .is-featured .wl-study-output{width:460px;height:613.333374px}
.page-wl .wl-study-output-label{display:flex;align-items:center;flex:none;width:460px;height:58px;padding:22px;background:#171716;color:#24c789;font-family:'HarmonyOS Sans SC',var(--sans);font-size:19.634px;line-height:14px}
.page-wl .wl-study-output-divider{position:absolute;left:0;top:669.333374px;z-index:1;max-width:none}
.page-wl .is-featured .wl-study-input{height:238px}
.page-wl .wl-study-input-label{position:absolute;left:22px;top:22px;font-family:'HarmonyOS Sans SC',var(--sans);font-size:19.634px;line-height:14px;color:#24c789}
.page-wl .is-featured .wl-study-input-row{left:22px;right:22px;top:52px;height:164px;grid-template-columns:112.195114px repeat(7,minmax(0,1fr));column-gap:12.400698px}
.page-wl .is-featured .wl-study-portrait{left:0;top:0;width:112.195114px;height:141.178833px}
.page-wl .is-featured .wl-study-field{height:164px}
.page-wl .is-featured .wl-study-field>span{font-size:19.634px;line-height:31px}
.page-wl .is-featured .wl-study-field.is-gold{color:rgba(216,162,74,.5)}
/* Figma 4140:1578: outcome cards retain their native text and shared entrance lifecycle. */
/* Center the cards on the 12px divider; reserve only their lower half in the document flow. */
.page-wl.wl-hero-study .hero-overlap-layer{--metric-half:clamp(64px,4.166667vw,80px);--divider-half:min(.3125vw,6px);height:calc(var(--metric-half) - var(--divider-half));margin:0 auto;width:min(75vw,1440px)}
.page-wl.wl-hero-study .hero-overlap-layer + .case-sec{margin-top:min(1.666667vw,32px)}
.page-wl.wl-hero-study .wl-metrics.hero-overlap{position:absolute!important;inset:auto!important;top:calc(0px - var(--metric-half) - var(--divider-half))!important;right:0!important;width:704px;height:160px;flex:none;gap:16px;transform:scale(var(--metric-scale));transform-origin:top right}
.page-wl .wl-metrics .metric-chip{height:160px;padding:16px 20px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.page-wl .wl-metrics .metric-chip:nth-child(1){width:207px}
.page-wl .wl-metrics .metric-chip:nth-child(2){width:188px}
.page-wl .wl-metrics .metric-chip:nth-child(3){width:277px}
.page-wl .wl-metrics .metric-chip--green{background:rgba(36,199,137,.5);border:1px solid #24c789}
.page-wl .wl-metrics .metric-chip--gold{background:rgba(216,162,74,.5);border:1px solid #d8a24a}
.page-wl .wl-metrics .metric-chip--blue{background:rgba(105,152,239,.5);border:1px solid rgba(155,190,255,.7)}
.page-wl .wl-metrics .num{display:block;flex:none;gap:0;font-family:'Snell Roundhand',cursive;font-weight:900;font-size:120px;line-height:1;color:#fff;white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.page-wl .wl-metrics .num strong,.page-wl .wl-metrics .num span{font-family:inherit;font-weight:inherit;font-style:normal;line-height:1}
.page-wl .wl-metrics .num strong{font-size:120px}
.page-wl .wl-metrics .num span{font-size:68px}
.page-wl .wl-metrics .lab{flex:none;gap:0;font-family:var(--sans);font-size:20px;line-height:29px;white-space:nowrap;color:#fff}
.page-wl .wl-metrics .metric-chip:nth-child(2) .lab{height:20px}
.page-wl .wl-metrics .lab img{flex:none;width:20px;height:20px}

/* Desktop readability: preserve the image composition while giving compact windows readable copy. */
@media (max-width:1439px){
  .page-wl .wl-study-tags span{height:max(40px,calc(28px / var(--study-scale)));padding-inline:16px;font-size:max(16px,calc(12px / var(--study-scale)))}
}
/* Only the decorative background expands beyond the approved 1920px composition. */
@media (min-width:1921px){
  .page-wl.wl-hero-study .wl-hero::before{content:'';position:absolute;inset:-16px -16px auto;height:1336px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(assets/wanlian-hero-study/background.webp) center/cover;filter:blur(16px);clip-path:inset(0 0 16px);pointer-events:none}
  .page-wl.wl-hero-study .wl-study-background{mask:linear-gradient(to right,transparent,#000 min(160px,calc((100vw - 1920px)/2)),#000 calc(100% - min(160px,calc((100vw - 1920px)/2))),transparent) 0 0/100% 100% no-repeat,url(assets/wanlian-hero-study/background-mask.svg) 0 0/1920px 1304px no-repeat;mask-composite:intersect}
}