/* Approved shared guide background hero. */

body.article-film-page{background:#080a0e}
.article-film-page main.editorial-article{padding-top:0}
.article-film-page .article-hero{padding-top:270px;padding-bottom:24px}
.article-film-page .article-hero .solution-film{height:740px}
.article-film-page .article-hero .solution-film:after{background:linear-gradient(to bottom,#0004 0%,#080a0e15 25%,#080a0e99 53%,#080a0ef2 82%,#080a0e 100%)}
.article-film-page .article-hero h1{max-width:950px}
.article-film-page .article-hero>.textlink{position:relative;color:#d2dce3;font-size:13px}
.article-film-page .article-hero .eyebrow{margin-top:22px}
.article-motion{position:absolute;right:0;top:210px;border:0;border-radius:24px;background:#080a0e9c;color:#f0f4f7;font-size:11px;padding:10px 14px;min-height:36px;cursor:pointer}
.article-motion[hidden]{display:none}.article-motion:focus-visible{outline:2px solid #8ad0dc;outline-offset:4px}
@media(max-width:640px){.article-film-page .article-hero{padding-top:245px;padding-bottom:12px}.article-film-page .article-hero .solution-film{height:700px}.article-film-page .article-hero h1{font-size:37px!important}.article-motion{top:185px}}

/* Keep the film inside the hero so its fade cannot cover the opening article line. */
.article-film-page .article-hero .solution-film{height:100%}
.article-film-page .article-hero h1,.article-film-page .article-hero .lede,.article-film-page .article-hero .eyebrow,.article-film-page .article-author,.article-film-page .article-meta{text-shadow:0 2px 5px #000c,0 3px 20px #0009}
.article-film-page .article-hero .eyebrow{color:#d6e5ee}
.article-film-page .article-hero .lede{color:#e2e7ec}
.article-film-page .article-hero>.textlink{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:24px;background:#080a0eb3;color:#f3f6f8;text-shadow:0 1px 4px #000;box-sizing:border-box}
.article-film-page .article-hero>.textlink:hover{background:#080a0ee6}
.article-film-page .article-layout{position:relative;z-index:1}
.article-film-page .longform{padding-top:4px}
.article-motion{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.article-motion:focus-visible{clip-path:none;overflow:visible;width:auto;height:auto;min-height:36px;padding:10px 14px;margin:0;top:110px}
@media(max-width:640px){.article-film-page .article-hero{padding-top:195px}.article-film-page .article-hero .solution-film{height:100%}.article-film-page .article-layout{margin-top:24px}}