/* Launch film in the homepage hero. It takes the drone chart's box and sizing
   (see drone-chart.css and refined.css); the video, loop and posters live in
   static/launch-film/ on the server (gitignored, content-hashed names). */
.hero-film .chart-stage{position:relative;background:#0e1c27}
.study-refined .hero-film .chart-stage{container-type:inline-size}
.hero-film video{display:block;width:100%;height:min(max(648px,47.84vw),56.28vw);object-fit:cover;cursor:pointer}
.study-refined .hero-film video{height:min(max(712.8px,47.84cqw),56.28cqw)}
/* The film hero is a full-width navy band like the other navy sections. The
   picture keeps the owner-selected banner size and centres on wide screens;
   phones get it edge to edge with the button row on the page background. */
.home-page.study-refined .home-hero-film{width:100%;margin-inline:0;padding-inline:max(0px,calc((100% - 1478.4px) / 2));background:#0e1c27}
.home-page .home-hero-film .trace-stage,.home-page .home-hero-film::after{border-radius:0}
.home-page .home-hero-film .trace-stage{box-shadow:none}
.home-page .home-hero-film::after{left:max(0px,calc((100% - 1478.4px) / 2));right:max(0px,calc((100% - 1478.4px) / 2))}
@media(max-width:760px){.home-page.study-refined .home-hero-film{background:none}}
/* Watch the film and Design a pond as one group of equal pills: the Watch pill centres at 75% of the
   video (higher only when the video is too short to fit the second pill), Design a pond sits below it. */
.hero-film-ctas{position:absolute;z-index:3;left:50%;top:min(75%,calc(100% - 139px));transform:translate(-50%,-37px);display:flex;flex-direction:column;align-items:stretch;gap:12px;transition:opacity .35s ease,visibility .35s}
.hero-film .hero-film-design{display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:74px;padding:0 26px;border:1px solid #326b98;border-radius:999px;background:#326b98;color:#fff;font:600 18px/1.2 var(--pt-font,system-ui,sans-serif);text-decoration:none;white-space:nowrap}
.hero-film .hero-film-design:hover{background:#244f73;border-color:#244f73;color:#fff}
.hero-film .hero-film-design:focus-visible{outline:3px solid #326b98;outline-offset:3px}
.hero-film-play{display:inline-flex;align-items:center;gap:16px;padding:10px 26px 10px 10px;border:1px solid #c8d7e3;border-radius:999px;background:rgba(247,250,252,.94);color:#19384f;font:600 18px/1.2 var(--pt-font,system-ui,sans-serif);white-space:nowrap;cursor:pointer;}
.hero-film-play:hover{background:#fff}
.hero-film-play:focus-visible{outline:3px solid #326b98;outline-offset:3px}
.hero-film-icon{position:relative;width:52px;height:52px;border-radius:50%;background:#326b98;flex:none}
.hero-film-play:hover .hero-film-icon{background:#244f73}
.hero-film-icon::after{content:'';position:absolute;left:21px;top:16px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.home-hero .hero-copy,.home-hero::after{transition:opacity .35s ease}
body.hero-film-playing .home-hero .hero-copy{opacity:0;pointer-events:none}
body.hero-film-playing .home-hero::after{opacity:0}
body.hero-film-playing .hero-film video{object-fit:contain;cursor:auto}
body.hero-film-playing .hero-film-ctas{opacity:0;visibility:hidden}
@media(min-width:761px){.home-hero-film .hero-actions{display:none}}
/* On phones the headline covers the top of the picture, so the pill sits at the bottom;
   while the film plays only the headline steps aside. */
@media(max-width:760px){
 .hero-film-ctas{top:auto;bottom:12px;transform:translateX(-50%)}
 .hero-film-play{justify-content:center;min-width:228px;gap:10px;padding:6px 16px 6px 6px;font-size:14px}
 .hero-film .hero-film-design{display:none}
 .home-hero-film .hero-actions{justify-content:center}
 .study-refined .home-hero-film .hero-actions .study-button{width:auto;min-width:228px;min-height:48px;padding:0 24px;border-radius:999px;font-size:14px}
 .hero-film-icon{width:34px;height:34px}
 .hero-film-icon::after{left:13px;top:10px;border-width:7px 0 7px 11px}
 body.hero-film-playing .home-hero .hero-copy{opacity:1;pointer-events:auto}
 body.hero-film-playing .home-hero h1{opacity:0;transition:opacity .35s ease}
}

/* Hero headline: the category as the H1, the promise as its smaller second line. */
.home-hero h1 .hero-sub{display:block;margin-top:.4em;font-size:.4em;line-height:1.25;letter-spacing:-.01em;color:var(--pt-ink);font-weight:600}
@media(max-width:760px){.home-hero h1#hero-heading{font-size:clamp(24px,7vw,34px);box-sizing:border-box;padding-right:20px}}