/* Headline and supporting action share one row; product proof follows immediately. */
.film-hero{display:block;position:relative;height:auto;max-height:none;min-height:0;padding-top:var(--header-height);background:var(--ground);border:0}
.hero-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;align-content:center;min-height:calc(100svh - var(--header-height) - min(14.7vw,210px));padding-block:64px;text-align:left}
.hero-content h1{font-size:clamp(48px,5vw,72px);font-weight:500;font-variation-settings:'wdth' 92,'opsz' 96;line-height:1.06;max-width:680px;margin:0;text-wrap:balance}
.hero-bottom{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:32px;margin:0;padding-left:0}
.hero-bottom p{font-size:20px;line-height:1.45;max-width:540px;color:var(--ink);text-align:left}
.hero-bottom .button{align-self:flex-start}
.software-section{padding-block:0 80px}
.software-views{max-width:1488px;margin-inline:auto}
.software-explanation{padding-top:80px}
.software-explanation .section-heading{margin-bottom:0;align-items:start}
.software-section h2{max-width:670px}
.audience-section{border-top:0}
@media(max-width:1100px){.hero-content{gap:40px}.hero-content h1{font-size:clamp(48px,5.2vw,64px)}.hero-bottom p{font-size:18px;line-height:1.5}}
@media(max-width:767px){.film-hero{min-height:0;height:auto}.hero-content{grid-template-columns:1fr;gap:28px;min-height:0;padding-block:56px 48px}.hero-content h1{font-size:clamp(40px,7.7vw,56px);max-width:650px;line-height:1.08;text-wrap:balance}.hero-bottom{gap:24px;align-items:flex-start}.hero-bottom p{font-size:18px;text-align:left;max-width:540px}.hero-bottom .button{min-width:0}.software-section{padding-block:0 56px}.software-explanation{padding-top:48px}.software-explanation h2{font-size:30px;line-height:1.15}.software-explanation .section-heading p{font-size:17px;line-height:1.5}}
@media(max-width:374px){.hero-content h1{font-size:38px}}

/* Headline, benefits and action share a balanced two-column composition. */
.hero-bottom{gap:24px}
.hero-bottom .hero-subtitle{max-width:500px;font-size:24px;line-height:1.3}
.hero-intro{min-width:0}
.hero-benefit{display:block}
.hero-subtitle strong{font-weight:700}
@media(min-width:768px) and (max-width:1100px){.hero-bottom .hero-subtitle{font-size:22px}}
@media(max-width:767px){.hero-content{gap:32px}.hero-bottom .hero-subtitle{font-size:20px}}