/* The hero film: a poster picture with the video over it, a play button and a button for sound. The poster
   holds the film's place from the first paint, so nothing moves when the video arrives. */
.hero.hero-try.has-film{grid-template-areas:"intro film" "cta film";grid-template-columns:.9fr 1.1fr;column-gap:52px}
.hero-film{grid-area:film;position:relative;align-self:center;min-width:0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#191c19;box-shadow:0 34px 70px -34px #000d,0 0 0 1px #ffffff1f}
.hero-film picture,.hero-film img,.hero-film video{display:block;width:100%;height:100%}
.hero-film img,.hero-film video{object-fit:cover}
.hero-film video{position:absolute;inset:0;cursor:pointer}
.hero-film.film-on video{opacity:0;transition:opacity .25s}
.hero-film.film-on.is-live video{opacity:1}
.film-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;border:0;padding:0;background:#191c1966;cursor:pointer}
.film-play[hidden],.film-sound[hidden],.film-pause[hidden]{display:none}
.film-play span{display:block;width:84px;height:84px;border-radius:50%;background:#ed572a center/34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");box-shadow:0 12px 34px #0009;transition:transform .15s}
.film-play:hover span,.film-play:focus-visible span{transform:scale(1.06)}
.film-sound{position:absolute;right:12px;top:12px;z-index:2;padding:12px 16px 12px 44px;border:0;border-radius:999px;background:#ed572a 14px center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E");font:inherit;font-size:15px;font-weight:700;line-height:1;color:#fff;box-shadow:0 10px 26px #0008;cursor:pointer;animation:none}
.film-sound[data-muted="true"]{animation:film-sound 1.8s ease-in-out infinite}
/* The browser muted the film: the button is the invitation to hear it, larger than a control. */
.film-sound[data-invite="true"]{top:8px;right:8px;padding:14px 16px 14px 44px;font-size:16px}
@keyframes film-sound{50%{box-shadow:0 10px 26px #0008,0 0 0 7px #ed572a40}}
.film-pause{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:#191c19cc center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");opacity:.9;cursor:pointer;transition:opacity .15s}
.film-pause:hover,.film-pause:focus-visible{opacity:1}
.film-play:focus-visible,.film-sound:focus-visible,.film-pause:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.film-pause:focus-visible{outline-offset:2px}
/* With the film in the hero, the question sits just below it, still on the hero's dark ground. */
.hero-question{padding-bottom:64px}
.hero-question .hero-workspace{max-width:640px;margin-inline:auto;transform:none;animation:none}
@media(max-width:820px){
  .hero.hero-try.has-film{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "film" "cta"}
  .hero-film{aspect-ratio:4/5;width:100%;max-width:430px;justify-self:center;margin-top:14px}
  /* The buy button belongs on the first screen: on a short phone the film gives up width, never the button. */
  /* 435px: the header, the title, the buy button and the free questions under it (#101). */
  @supports(height:100svh){.hero-film{width:clamp(168px,calc((100svh - 435px)*.8),100%)}}
  /* The Spanish title on a narrow phone: two lines, not four, as high as the English one, so the free questions
     reach the first screen in both languages. */
  html[lang="es"] .hero.hero-try.has-film h1{font-size:clamp(30px,8.4vw,44px)}
  .hero.hero-try.has-film{padding-top:20px;padding-bottom:26px}
  .hero.hero-try.has-film .hero-actions{margin-top:14px}
  /* The film and the buy button keep the first screen; what the payment buys follows the button. */
  .hero.hero-try.has-film .hero-cta .hero-offer{order:5}
  .hero.hero-try.has-film .hero-cta #hero-more{order:2}
  .hero.hero-try.has-film .hero-cta .fit-note{order:6}
  /* On a phone the film states the stake itself; the sentence above it would push the buttons off the screen. */
  .hero.hero-try.has-film .hero-description{display:none}
  /* The question follows the film and its buy button: a visitor reaches it within two screens. */
  .hero-question{padding-bottom:28px}
}
@media(prefers-reduced-motion:reduce){.film-sound{animation:none}.hero-film.film-on video,.film-play span,.film-pause{transition:none}}