/* Figma 4144:4892. The source background is 1088px high; the code-card row ends at 1241px. */
.page-pb.pb-hero-study{--study-scale:min(1,var(--s,1));--metric-scale:clamp(.8,var(--s,1),1);--hero-cover-top:min(64.635417vw,1241px)}
.page-pb.pb-hero-study .pb-hero{height:min(64.635417vw,1241px);margin-top:0;overflow:hidden;background:var(--bg)}
.page-pb .pb-study-canvas{position:absolute!important;left:50%!important;top:0!important;width:1920px!important;height:1241px!important;margin:0!important;padding:0!important;transform:translateX(-50%) scale(min(1,var(--s,1)))!important;transform-origin:top center;overflow:hidden}
.page-pb .pb-study-background{position:absolute;left:0;top:0;width:1920px;height:1088px;overflow:hidden;mask:url(assets/playblocks-hero-study/background-mask.svg) 0 0/1920px 1088px no-repeat;pointer-events:none}
.page-pb .pb-study-base{position:absolute;left:0;top:0;max-width:none}
.page-pb .pb-study-scene{position:absolute;left:-98.000131px;top:-11.999908px;width:2017.908325px;height:1187.314941px;max-width:none;object-fit:cover;filter:blur(6px)}
.page-pb .pb-study-architecture-base,.page-pb .pb-study-architecture-shade{position:absolute;left:644.537109px;top:205.164063px;width:816.417053px;height:461.940887px}
.page-pb .pb-study-architecture-base{background:#111}
.page-pb .pb-study-architecture{position:absolute;left:644.537109px;top:219.34375px;width:817.017822px;height:434.328918px;max-width:none;object-position:bottom}
.page-pb .pb-study-architecture-shade{background:linear-gradient(180deg,#111 4.5234%,rgba(17,17,17,0) 9.1115%,rgba(17,17,17,0) 91.696%,#111 96.284%)}
.page-pb .pb-study-shade{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.page-pb .pb-study-canvas .hero-fixed-copy{left:236px;top:123px;bottom:auto;width:766px;height:357px}
.page-pb .pb-study-canvas .hero-fixed-copy h1{width:853px;margin:0;font-family:'IBM Plex Sans',var(--sans);font-size:80px;line-height:96px;font-weight:700;color:#fff;white-space:nowrap}
.page-pb .pb-study-title-rule{position:absolute;left:0;top:116px;max-width:none}
.page-pb .pb-study-canvas .case-lead{position:absolute;left:0;top:144px;width:max(766px,calc(560px / var(--study-scale)));margin:0;font-size:max(20px,calc(16px / var(--study-scale)));line-height:1.65;color:#fff}
.page-pb .pb-study-tags{position:absolute;left:0;top:317px;display:flex;gap:8px;width:766px}
.page-pb .pb-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-pb .pb-study-tags span:nth-child(1){width:197px}.page-pb .pb-study-tags span:nth-child(2){width:135px}.page-pb .pb-study-tags span:nth-child(3){width:120px}.page-pb .pb-study-tags span:nth-child(4){width:144px}
.page-pb .pb-study-canvas .pb-study-app{position:absolute;left:1612px;top:123px;width:64px;height:64px;margin:0;border-radius:8px;object-fit:cover}
.page-pb .pb-study-gallery{position:absolute;left:-617px;top:392px;width:2928px;height:849px;display:flex;align-items:flex-end;gap:16px}
.page-pb .pb-study-card{flex:none;width:300px;height:637px;display:flex;flex-direction:column}
.page-pb .pb-study-card header{display:flex;align-items:center;flex:none;height:37px;padding:12px;background:rgba(36,199,137,.5);color:#fff;font-family:'HarmonyOS Sans SC',var(--sans);font-size:18px;line-height:1.6}
.page-pb .pb-study-card header span{text-box-trim:trim-both;text-box-edge:cap alphabetic;white-space:nowrap}
.page-pb .pb-study-card>img{display:block;flex:none;width:300px;height:600px;max-width:none;object-fit:cover}
.page-pb .pb-study-card.is-blue header{background:#6998ef}
.page-pb .pb-study-card.is-featured{width:400px;height:849px}
.page-pb .pb-study-card.is-featured header{height:49px;padding:16px;font-size:24px}
.page-pb .pb-study-card.is-featured>img{width:400px;height:800px}
/* Both outcome cards straddle the boundary at the bottom of the source-code cards. */
.page-pb.pb-hero-study .hero-overlap-layer{height:clamp(64px,4.166667vw,80px);margin:0 auto;width:min(75vw,1440px)}
.page-pb.pb-hero-study .hero-overlap-layer+.case-sec{margin-top:min(1.666667vw,32px)!important}
.page-pb.pb-hero-study .case-metrics.hero-overlap{position:absolute!important;inset:auto!important;top:calc(0px - clamp(64px,4.166667vw,80px))!important;right:min(3.333333vw,64px)!important;width:449px;height:160px;gap:16px;transform:scale(var(--metric-scale));transform-origin:top right}
.page-pb.pb-hero-study .case-metrics .metric-chip{height:160px;padding:16px 24px 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-pb.pb-hero-study .case-metrics .metric-chip--green{width:194px;background:rgba(36,199,137,.5);border:1px solid #24c789}
.page-pb.pb-hero-study .case-metrics .metric-chip--blue{width:239px;background:rgba(105,152,239,.5);border:1px solid #6998ef}
.page-pb.pb-hero-study .case-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-pb.pb-hero-study .case-metrics .num strong,.page-pb.pb-hero-study .case-metrics .num span{font-family:inherit;font-weight:inherit;font-style:normal;line-height:1}
.page-pb.pb-hero-study .case-metrics .num strong{font-size:120px}
.page-pb.pb-hero-study .case-metrics .num span{font-size:68px}
.page-pb.pb-hero-study .case-metrics .lab{flex:none;gap:0;font-family:var(--sans);font-size:20px;line-height:29px;color:#fff;white-space:nowrap}
.page-pb.pb-hero-study .case-metrics .metric-chip--blue .lab{height:20px;color:#f0f0f0}
.page-pb .case-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-pb .pb-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-pb.pb-hero-study .pb-hero::before{content:'';position:absolute;inset:-16px -16px auto;height:1120px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(assets/playblocks-hero-study/background.webp) center/cover;filter:blur(16px);clip-path:inset(0 0 16px);pointer-events:none}
  .page-pb.pb-hero-study .pb-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/playblocks-hero-study/background-mask.svg) 0 0/1920px 1088px no-repeat;mask-composite:intersect}
}