/* Shared product-hero geometry, using TypeMotion's title/demo/action rhythm. */
html[data-cs-shell] {
  --hero-title-size:clamp(54px,5vw,72px);
  --hero-title-line:1.02;
  --hero-title-height:calc(var(--hero-title-size) * 1.02);
  --hero-title-gap:16px;
  --hero-media-width:min(900px,calc((100svh - 440px) * 1.778));
  --hero-media-ratio:16 / 9;
  --hero-action-margin:12px;
  --hero-action-inset:34px;
  --hero-action-height:121.1px;
  --hero-padding:74px 32px 24px;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero{
  width:100%!important;max-width:1240px!important;box-sizing:border-box!important;
  min-height:calc(100svh - var(--announce-h,0px))!important;
  margin:0 auto!important;padding:var(--hero-padding)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:0!important;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero :is(.hero-grid,.hero-copy,.hero-panel-col),
html[data-cs-shell="motionease"] body #main-content#main-content#main-content>.hero .hero-grid>div:first-child{
  display:contents!important;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero h1{
  order:1!important;width:100%!important;max-width:1120px!important;box-sizing:border-box!important;
  min-height:var(--hero-title-height)!important;margin:0 0 var(--hero-title-gap)!important;
  padding:0!important;font-size:var(--hero-title-size)!important;line-height:var(--hero-title-line)!important;
  font-weight:400!important;letter-spacing:-.01em!important;text-align:center!important;
  align-content:center;white-space:nowrap!important;text-wrap:balance;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero :is(.tm-demo-viewport,.me-panel,.qfx-panel,.basic-demo-plain){
  order:2!important;width:var(--hero-media-width)!important;max-width:100%!important;
  min-height:0!important;height:auto!important;max-height:none!important;
  margin:0 auto!important;padding:0!important;aspect-ratio:var(--hero-media-ratio)!important;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero :is(.tm-demo-media,video){
  display:block!important;width:100%!important;height:100%!important;
  max-height:none!important;min-height:0!important;aspect-ratio:var(--hero-media-ratio)!important;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero :is(.hero-purchase,.me-hero-enter--purchase,.hero-actions){
  order:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:flex-start!important;flex:none!important;box-sizing:border-box!important;
  width:100%!important;max-width:100%!important;height:var(--hero-action-height)!important;
  margin:var(--hero-action-margin) 0 0!important;padding:var(--hero-action-inset) 0 0!important;gap:7px!important;
}
html body :is(#main-content#main-content#main-content,#main#main#main)>.hero .buy-pair{
  margin:0 auto!important;padding:0!important;
}
@media(max-width:760px){
  html[data-cs-shell]{
    --hero-title-size:clamp(34px,11vw,44px);--hero-title-line:1.08;
    --hero-title-height:calc(var(--hero-title-size) * 2.16);--hero-title-gap:12px;
    --hero-media-width:calc((100vw - 32px) * .85);--hero-media-ratio:1 / 1;
    --hero-action-margin:11px;--hero-action-inset:26px;--hero-action-height:105.8px;
    --hero-padding:68px 18px 24px;
  }
  html body :is(#main-content#main-content#main-content,#main#main#main)>.hero h1{
    max-width:390px!important;white-space:normal!important;
  }
}
@media(max-width:374px){html[data-cs-shell]{--hero-action-height:101.8px}}
@media(max-width:340px){html[data-cs-shell]{--hero-padding:64px 18px 18px;--hero-title-gap:10px;--hero-action-margin:9px}}
html body #main#main#main>.hero .basic-primary-download{
  width:auto!important;max-width:100%!important;flex:none!important;
}