/* Approved inline opening. Its faded edges require this exact page colour. */
.hero{background:#f3f3f4;align-items:start}
.hero-opening{width:100%;max-width:400px;min-width:0;margin:0 auto;background:#f3f3f4;align-self:start}
.opening-media{width:100%;background:#f3f3f4}
.opening-media :is(video,img){display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#f3f3f4;border:0;border-radius:0;box-shadow:none}
.hero-opening [hidden]{display:none!important}
.opening-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;min-height:44px}
.opening-controls>span,.hero-opening figcaption{font-size:11px;line-height:1.6;color:#58636e}
.opening-toggle{font:inherit;font-size:13px;font-weight:700;min-height:44px;min-width:84px;padding:10px 17px;border:1px solid #8c949a;border-radius:100px;color:#26353d;background:#fff;cursor:pointer}
.opening-toggle:focus-visible{outline:3px solid #7a62b4;outline-offset:4px}
.hero-opening figcaption{text-align:center;margin-top:8px}
.hero-opening figcaption span{margin-inline:6px}
@media(max-width:760px){.hero-opening{max-width:320px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.hero-opening .opening-video,.hero-opening .opening-toggle{display:none!important}.hero-opening .opening-poster{display:block!important}}

/* Ana approved v5 on November 12. */
.opening-video{mix-blend-mode:darken}
/* Lift the intact portrait frame; do not crop the logo or mascot animation. */
@media(min-width:761px){.hero-opening{transform:translateY(-140px);margin-bottom:-140px}}
.hero-opening,.opening-media{background:transparent}
.opening-media{mix-blend-mode:darken}

/* Fade only empty outer margins, preserving the original frame and colours. */
.opening-media{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
/* Blend the composited frame (including the edge mask) against the page. */
.hero-opening{mix-blend-mode:darken}

/* Ana requested the intact hero phone/control group about 2cm higher on desktop. */
@media(min-width:761px){.hero-opening{transform:translateY(-210px);margin-bottom:-210px}}