/* Identity → real sample → details in the DOM. Wide screens compose them side by side. */
.p24-page .hero-heading,.study24 .p24-product-heading{container-type:inline-size;min-width:0;grid-area:identity;align-self:end}
.p24-page .hero-details,.study24 .p24-product-details{grid-area:details;align-self:start}
.p24-page .studio-hero,.p24-page .hub-hero{
  grid-template-areas:"identity visual" "details visual";
  grid-template-rows:auto auto;row-gap:22px;align-content:center;align-items:center;
}
.p24-page .studio-hero{grid-template-areas:"visual identity" "visual details"}
.p24-page .studio-hero .p20-gallery,.p24-page .hub-hero .p20-hub-demo{grid-area:visual;order:0;align-self:center}
.p24-page .hero-heading .product-kicker{margin-bottom:16px}
.p24-page .hero-heading .p20-tagline{margin-top:20px}
.p24-page .hero-details .lead{margin-top:0}
.p24-page .hero-details .hero-actions{margin-top:24px}
.p24-page .p20-gallery,.p24-page .p20-hub-demo{position:relative;isolation:isolate}
.p24-page .p20-gallery:before,.p24-page .p20-hub-demo:before{
  display:none;content:"";position:absolute;inset:-16px -16px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,#2c1935f2,#221329e8),url('assets/product20-wave.svg');
  background-size:auto,80px 80px;
}
.p24-page .p20-gallery:before{background-image:linear-gradient(105deg,#2c1935cc,#221329e8),url('assets/product20-wave.svg')}
.p24-page .p20-hub-demo:before{background-image:linear-gradient(105deg,#221329ed,#2c1935bb),url('assets/product20-wave.svg')}
.study24 .p20-product-row{
  grid-template-areas:"identity visual" "details visual";grid-template-rows:auto auto;
  row-gap:20px;align-content:center;align-items:center;
}
.study24 .p20-product-row.p20-studio-row{grid-template-areas:"visual identity" "visual details"}
.study24 .p20-product-row .p20-product-art{grid-area:visual;order:0;align-self:center}
.study24 .p24-product-heading .v23-signature{margin-bottom:0}
.study24 .p24-product-details{display:block;min-width:0}
.study24 .p24-product-details .p20-product-entry{margin-top:22px}
@media(max-width:1100px){
  .p24-page .hub-hero{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "visual" "details";
    grid-template-rows:auto auto auto;gap:28px;
  }
  .p24-page .hub-hero .hero-heading,.p24-page .hub-hero .hero-details{max-width:800px;width:100%;justify-self:center}
  .p24-page .hub-hero:before{display:none}
  .p24-page .p20-hub-demo:before{display:block}
  .study24 .p20-product-row.p20-hub-row{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "visual" "details";
    grid-template-rows:auto auto auto;gap:24px;
  }
  .study24 .p20-hub-row .p24-product-details{display:block}
}
@media(max-width:1000px){
  .study24 .p20-product-row.p20-studio-row{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "visual" "details";
    grid-template-rows:auto auto auto;gap:24px;
  }
  .study24 .p20-studio-row .p20-product-art{max-width:640px;justify-self:center}
}
@media(max-width:800px){
  .p24-page .studio-hero,.p24-page .hub-hero{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "visual" "details";
    grid-template-rows:auto auto auto;gap:26px;padding-block:30px 50px;
  }
  .p24-page .hero-heading,.p24-page .hero-details{width:100%;max-width:680px;justify-self:center}
  .p24-page .studio-hero .p20-gallery{order:0;justify-self:center}
  .p24-page .hero-heading .p20-tagline{margin-top:16px}
  .p24-page .studio-hero:before{display:none}
  .p24-page .p20-gallery:before,.p24-page .p20-hub-demo:before{display:block;inset:-10px -16px}
  .p24-page .hero-details{padding-top:2px}
}
@media(max-width:760px){
  .study24 .p20-product-row,.study24 .p20-product-row.p20-hub-row,.study24 .p20-product-row.p20-studio-row{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "visual" "details";
    grid-template-rows:auto auto auto;gap:22px;
  }
}
@media(max-width:519px){
  .p24-page .studio-hero,.p24-page .hub-hero{gap:24px}
  .p24-page .hero-heading .product-kicker{margin-bottom:12px}
  .p24-page .hero-heading .p20-tagline{font-size:16px;line-height:1.8;margin-top:14px}
  .p24-page .hero-details .lead{line-height:1.9}
  .p24-page .hero-details .hero-actions{margin-top:20px}
  .study24 .p24-product-details .p20-product-entry{margin-top:18px}
}